How to Get Anything You Want – part 2

A couple weeks ago I wrote about traversing the DOM with jQuery's selector expressions to get any elements in the document (see How to Get Anything You Want - part 1). This time around, I'm going to focus on jQuery methods that provide even more ways to get elements. Some of these methods have a nearly identical counterpart among the selector expressions, but for the most part, the two ways of getting elements complement each other.

Once again, I've put together a short paragraph and an ordered list scattered with inline elements such as <em>, <code>, and links. This time it's wrapped in a DIV with an ID of "jqdt2," which allows me to focus the demonstration to one area of this page.

Each button below the "jqdt2" DIV will toggle a background color on and off for the parts of the DIV described.

This is a paragraph of text with class="goofy." It has an external link, some $(code), and a same-page link.

  1. list item 1 with dummy link to silly.pdf
  2. list item 2 with class="goofy"
  3. list item 3 with class="funny"
  4. list item 4 with silly link to silly.pdf
  5. list item 5 with class="goofy"

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.

For a complete list of DOM traversal methods, visit VisualjQuery.com and click on "DOM" and then "Traversing." In addition to the ones covered in this entry, you'll find the following:

  • .is()
  • .prev(): just like next(), but in the opposite direction
  • .parents(): functions the same as .ancestors() As of jQuery 1.1, .ancestors() is no longer supported. Please use .parents() instead.
  • .add(): allows you to add another group of jQuery objects