DOM Filtering with jQuery - What You Need to Know

We have already given an introduction to the jQuery library, showing how useful it can be for web designers and developers: it simplifies the JavaScript syntax for lots of useful DOM-related tasks and it can dramatically speed up the routines to select DOM elements. Now it’s time to expand your abilities to select and manipulate the elements you need: Welcome to filtering.


A quick overview

The filters

  • .eq()

    When using one of the traversing methods, like .children(), you get a jQuery object with possibly multiple elements: with .eq(i) you can select the element with the position indicated by the index i. The index of the first element starts from 0 and can also be a negative integer; in this case the selection starts at the end of the set, rather than at the beginning.

    <ul>
        <li>
          <b>Item A</b>
        </li>
        <li>
          <strong>Item B</strong>
        </li>
        <li>
          <em>Item C</em>
        </li>
        <li>
          <b>Item D</b>
        </li>
        <li>
          <em>Item E</em>
        </li>
    </ul>

    $(‘ul’).children().eq(0) ⇒ Item A
    $(‘ul’).children().eq(-2) ⇒ Item D

  • .has()

    This method constructs a new object with all the selected elements that contain at least one supplied selector, in the following example the b tag.

    $(‘ul’).children().has(‘b’) ⇒ Item A and Item D

  • .is()

    The .is() method may seem similar to the above-mentioned .has(), since it checks the collection against the supplied selector, but actually it’s totally different. The .is() method not only accepts a selector as an argument but also a function, an element, or an object. However, the main difference between the methods is that .is() does not return a jQuery object but performs a test against the argument, therefore returning true or false.

    $( "ul" ).click(function( event ) {
      var target = $( event.target );
      
      if ( target.is( "b" ) ) {
        target.css( "background-color", "red" );
    }});
  • .first() and .last()

    These methods return the first and, respectively, the last element of a jQuery collection. They do not accept any arguments but can be chained as usual.

    $('ul').children().first().has('b') ⇒ Item A
    $('ul').children().last().has('b') ⇒ No items
    $('ul').children().last().has('em') ⇒ Item E

  • .slice()

    With this method we can filter our jQuery object with the aid of two indices, the starting and ending position. The element at the ending index is not included, so .slice(0, 3) returns three elements and not four. Only the starting index is mandatory; if the ending one is omitted, all the elements up to the end of the jQuery object are included. Indices can also be negative; in this case the starting position is at the end of the object.

    $(‘ul’).children().slice(1, 4) ⇒ Item B, Item C, Item D
    $(‘ul’).children().slice(1, -2) ⇒ Item B, Item C

  • .not()

    The purpose of this selector is to exclude items from a collection; it accepts a selector or a function as an argument. The elements of the collection are tested against the selector and the ones that don’t match are included in the new collection.

    $('ul').children().not(':first-child, :last-child') ⇒ 
    Every item except A and E

  • .filter()

    This method tests the collection against a selector, an object, or a function and constructs a new jQuery object consisting of the matching elements. The list of possible selectors is pretty long: 

    :first Selects the first matched element of the selector's returned set
    :last Selects the last and single instance of the element matching the selector's returned set
    :even Selects the even elements with a zero-based index within the matched set
    :odd Selects the odd elements with zero-based indexing within the matched set
    :eq(index) Selects the element that is equal to the given index n within the matched set
    :gt(index) Selects all elements that are greater than the given zero-based index within the matched set
    :lt(index) Selects all elements that are less than the given zero-based index within the matched set
    :animated Selects all elements that are currently being animated at the time the selector is run
    :header Selects all header elements (H1...H6)
    :not Selects all elements that do not match the given selector
    :checkbox Selects all elements that match the type checkbox
    :contains(text) Selects a string of text (case sensitive)
    :disabled Selects all elements that are disabled
    :enabled Selects all elements that are enabled
    :file Selects all elements of a specific file type

    $('ul').children().filter(':gt(1)').css('color', 'violet') ⇒ Item C, Item D, Item E
    $('ul').children().filter(':even').css('color', 'violet') ⇒ Item A, Item C, Item E

Filtering is often used in conjunction with traversing: we get a collection of items and we refine the choice in a more specific way. Pointing out the usefulness of these handy methods is surely unnecessary: jQuery offers an impressive array of tools to easily select whatever element we need. Although this is usually just the starting point, having a firm command of the traversing and filtering possibilities is a solid foundation for programming a jQuery plugin or a complex function. It’s always nice to remember that these results can be achieved with standard JavaScript as well (often referred to as “vanilla JavaScript”) but the advantages offered by the jQuery library allow us to write code more easily and quicker, leaving more time to concentrate on advanced JavaScript logic.

Ready to start? Create your free account now