Learning jQuery

Click a link to toggle the selector's highlighting

• get the first list item within the element with an id of "jqdt2."
  $('#jqdt2').find('li').eq(0)
• get the first 3 list items. "lt" stands for "less than," and it starts counting at 0, not 1.
  $('#jqdt2').find('li').lt(3)
  $('#jqdt2').find('li').slice(0,3)
• get list items 1, 2, 4, and 5 because they're the siblings of "funny." $('#jqdt2').find('li.funny').siblings()
• get all list items that contain the string "silly" as long as they are not greater than the third list item. So, even though list item 4 has the word "silly" in it, it won't be selected because it is greater than the third.
  $('#jqdt2').find('li').not(':gt(2)').contains('silly')
  $('#jqdt2').find('li').not(':gt(2)').filter(':contains(silly)')
• first get all list items inside "jqdt2" and then filter them so that it ultimately only gets the list items that have a class of "goofy."
  $('#jqdt2').find('li').filter('[@class=goofy]')
  $('#jqdt2').find('li').filter('[class=goofy]')
  or, better yet: $('#jqdt2').find('li.goofy')

• $('#jqdt2')
      .find('li.funny')
        .css('backgroundColor','#0ff')
      .end()
      .find('p > strong')
        .css('backgroundColor','#ff0')

  With this example you can see that jQuery's chaining does not have to occur on a single line, but can be extended to multiple lines for better readability. I've also exposed the CSS backgroundColor setting that occurs in all of these examples so that you can see how .end() works. Any time you use one of jQuery's DOM traversing methods, you can back out of it after you have done what you want with it. Here, the first .find() applies CSS to list items with a class of "funny"; the .end() backs us out of that set of jQuery objects and up to the opening $('#jqdt2'); the final .find() method gets a completely separate group of DOM nodes and applies an aqua background color to it. Also, note that I use the DOM property "backgroundColor" rather than the CSS property "background-color." While either one should work with jQuery, CSS properties that contain a hyphen will break in some builds. Therefore, I recommend "camel-casing" those properties, just to be safe.
• $('li.goofy')
.parents('#jqdt2')
.children('p')
.next()
.find('a')
.parent()
  This final example is a ridiculously circuitous traversal sequence that probably isn't practical in itself, but I wanted to show a couple more of the methods at your disposal. Unlike all the other examples, this one doesn't start by narrowing the possible DOM elements to those within an element with an id of "jqdt2." Instead, it starts with all list items with a class of goofy, and then gets any ancestor with an id of "jqdt2" (since IDs should be unique, there should be only one). Next, it gets all children of "jqdt2" that are paragraphs and moves on to the next sibling, which in this case is the ordered list (<ol>). Finally, it looks for links within that ordered list and gets the parent of each. So, by the end of all this skipping around the DOM, we should have selected list items 1 and 4.