{"push_id":882452227,"size":5,"distinct_size":5,"ref":"refs/heads/Chp9AdvancedSelectorsAndTraversing","head":"9836f8d8b6a190ed4f396f4ec315a20b5c7f3279","before":"b749737d9ee69bdee82e811f3f95b160189ab69b","commits":[{"sha":"dc416b5a756ab24b303b807982b8bca535ffcbc3","author":{"email":"688085edcac35a6f5d4cd9ba4db0e893cb0d2736@gmail.com","name":"petrero"},"message":"  In January 2009, jQuery's creator John Resig introduced a new open source JavaScript project called Sizzle. A standalone CSS selector engine, Sizzle was written to allow any JavaScript library to adopt it with little or no modification to its codebase. In fact, jQuery has been using Sizzle as its own selector engine ever since version 1.3.\n  Sizzle is the component within jQuery that is responsible for parsing the CSS selector expressions we put into the  function. It determines which native DOM methods to use as it builds a collection of elements that we can then act on with other jQuery methods. The combination of Sizzle and jQuery's set of traversal methods makes jQuery an extremely powerful tool for finding elements on the page.\n  In Chapter 2, Selecting Elements, we looked at each of the basic types of selectors and traversal methods so that we have a roadmap of what's available to us in the jQuery library. In this more advanced chapter, we will cover:\n• Using selectors to find and filter data in various ways\n• Writing plugins that add new selectors and DOM traversal methods\n• Optimizing our selector expressions for better performance\n• Understanding some of the inner workings of the Sizzle engine\n  To kick off this more in-depth look into selectors and traversing, we'll build a script that will provide yet more selecting and traversing examples to inspect. For our sample, we'll build an HTML document containing a list of news items. We place those items in a table so that we can experiment with selecting rows and columns in several ways.\n  From this code fragment, we can see the structure of the document. The table has four columns, representing date, headline, author, and topic, but some table rows contain a subheading of a calendar year instead of those four items.\n  Between the title and the table, there is a set of links representing each of the news topics in the table. For our first task, we'll change the behavior of these links to perform filtering of the table 'in place' rather than requiring navigation to different pages.","distinct":true,"url":"https://api.github.com/repos/pyterDiaconescu/jQuery/commits/dc416b5a756ab24b303b807982b8bca535ffcbc3"},{"sha":"9ebcca2bc6c4a65f0f0d6415f93afb71707f3301","author":{"email":"688085edcac35a6f5d4cd9ba4db0e893cb0d2736@gmail.com","name":"petrero"},"message":"  In order to use the topic links to filter the table, we need to defeat their default linking behavior. We should also give the user some feedback about the currently selected topic.\n  We remove the selected class from all the topic links when one is clicked, then add the selected class to the new topic. The .preventDefault() statement prevents the link from being followed.","distinct":true,"url":"https://api.github.com/repos/pyterDiaconescu/jQuery/commits/9ebcca2bc6c4a65f0f0d6415f93afb71707f3301"},{"sha":"6ae31f7e6577fbb55c313c727f53ece4c44cd1be","author":{"email":"688085edcac35a6f5d4cd9ba4db0e893cb0d2736@gmail.com","name":"petrero"},"message":"  We need to actually perform the filtering operation. As a first pass at this problem, we can hide every row of the table that doesn't contain the text of the topic.\n  We're now storing the text of the link in the variable topic so that we can compare it against the text in the table itself. First we show all the table rows, and then if the topic is not All, we hide the irrelevant ones. The selector we're using for this process is a little complex, though:\n#news tr:has(td):not(:contains('topic'))\n  The selector starts straightforwardly, with #news tr locating all of the rows in the table. We then filter this element set using the :has() custom selector. This selector winnows the currently selected elements down to those that contain the specified descendant. In this case, we're eliminating the header rows (such as the calendar years) from consideration, since they do not contain <td> cells.\n  Once we have found the rows of the table where the actual content lies, we need to find out which ones relate to the selected topic. The :contains() custom selector matches just the elements that have the given text string somewhere inside them; wrapping this in a :not() selector then gives us all the rows that don't have the topic string so we can hide them.","distinct":true,"url":"https://api.github.com/repos/pyterDiaconescu/jQuery/commits/6ae31f7e6577fbb55c313c727f53ece4c44cd1be"},{"sha":"60842f2706a16eb8e8f7c7dad9c5f00c91dd082d","author":{"email":"688085edcac35a6f5d4cd9ba4db0e893cb0d2736@gmail.com","name":"petrero"},"message":"  The previous code works well enough, unless the topic happens to appear as part of a news headline, for instance. We also need to take care of the eventuality that one topic is a substring of another. To handle these cases, we will need to execute a little code for each of the rows.\n  This new code eliminates some of the complex selector expression text by adding DOM traversal methods. The .find() method acts just like the space previously separating #news and tr , but the .not() method is doing something that :not() can't accomplish. Just as we saw with the .filter() method back in Chapter 2, Selecting Elements, .not() can accept a callback function invoked once per element to be tested. If that function returns true , the element is excluded from the result set.\n  Selectors versus traversal methods\n  The choice of using a selector or its equivalent traversal method has performance ramifications as well. We'll explore this choice in more detail later in this chapter.\n  Inside the .not() method's filtering function, we examine the child elements of the row to find the fourth one (which is the cell in the Topic column). A simple check of the text of this cell tells us whether the row should be hidden. Only the matching rows are displayed","distinct":true,"url":"https://api.github.com/repos/pyterDiaconescu/jQuery/commits/60842f2706a16eb8e8f7c7dad9c5f00c91dd082d"},{"sha":"9836f8d8b6a190ed4f396f4ec315a20b5c7f3279","author":{"email":"688085edcac35a6f5d4cd9ba4db0e893cb0d2736@gmail.com","name":"petrero"},"message":"  In Chapter 2, Selecting Elements, one of our selector examples illustrated the ways in which we can apply alternating row colors to a table. We saw that the :even and :odd custom selectors can make short work of this task, and that the CSS-native :nth-child() pseudo-class can accomplish it as well.\n  This straightforward selector finds every other table row, and since each year's news articles reside in their own <tbody> element, the alternation starts over again with each section.","distinct":true,"url":"https://api.github.com/repos/pyterDiaconescu/jQuery/commits/9836f8d8b6a190ed4f396f4ec315a20b5c7f3279"}]}