Filtering ElementsS2C Home « Filtering Elements

• <<    jQuery Basics - Position CSS Properties
• DOM Insertion, Inside     >>

There are times when we want to reduce the elements in our matched set and jQuery gives us several filtering methods to do just that. In this lesson we investigate these methods and their usage.

The jQuery filtering methods will create a new jQuery object containing the filtered set of elements.

• The .is() method does not create a new jQuery object like the other filtering methods do, but allows testing of a jQuery object without modifying the contents.

The .eq() Method  Top

Used to reduce the matched set to the element at the specified index.

We will be using the .eq( index ) signature for our example which reduces the matched set to the element at the specified index.

The second signature .eq( -index ) will reduce the matched set to the element at the specified index, counting backwards from the last element in the set.

Examples of both signatures are available in the reference section.

In the example we select the third 'td' element and change the background colour.

$(function(){
  $('#btn1').on('click', function() {
    $('.testtable td').eq(2)
                      .css('backgroundColor', 'orange');
  });
});

The .even() Method  Top

Reduce the matched set to the even elements, starting at zero.

In the example we select all even 'td' elements and change the background colour to orange.

$(function(){
  $('#btn10').on('click', function() {
    $('.testtable6 td').even()
                      .css('backgroundColor', 'orange');
  });
});

The .filter() Method  Top

Used to reduce the matched set to elements that match the specified selector, element, jQuery object or pass the function's test.

We will be using the .filter( jQuery object ) signature for our example which will reduce the matched set to elements that match the jQuery object.

The second signature .filter( selector ) will reduce the matched set to elements that match the selector.

The third signature .filter( element ) will reduce the matched set to elements that match the element.

The fourth signature .filter( function(index) ) will pass each element within the current matched set through a function, reducing the matched set to elements that return true.

Examples of all four signatures are available in the reference section.

In the example below we select all 'td' elements with a class of 'class1', within the table with a class of 'testtable2' and save them to a jQuery object. We then iterate over all 'td' elements within the table changing the background colour to silver, if the 'td' element matches an element in our saved jQuery object.

$(function(){
  $('#btn2').on('click', function() {
    var $td = $('.testtable2 .class1');
    $('.testtable2 td').filter($td).css('backgroundColor', 'silver'); 
  });
});

The .first() Method  Top

Used to reduce the matched set to the first element.

In the example below we select all 'td' elements within the table with the class of 'testtable' and then reduce the matched set to the first element.

$(function(){
  $('#btn3').on('click', function() {
    $('.testtable3 td').first()
                       .css('backgroundColor', 'yellow');
  });
});

The .has() Method  Top

Used to reduce the matched set to to those elements that have a descendant that matches the specified selector or DOM element.

We will be using the .has( selector ) signature for our example which will reduce the matched set to those elements that have a descendant that matches the selector.

The second signature .has( contains ) will reduce the matched set to those elements that have a descendant that matches the DOM element.

Examples of both signatures are available in the reference section.

In the example below we select all 'p' elements that have an 'em' descendant and turn the background colour yellow.

$(function(){
  $('#btn4').on('click', function() {
    $('#main p').has('em')
                .css('backgroundColor', 'yellow'); 
  });
});

The .is() Method  Top

Used to compare the matched set against a specified selector, element, jQuery object or function and return true if any element matches the given arguments.

We will be using the .is( element ) signature for our example which will check the current matched set of elements against an element.

The second signature .is( selector ) will check the current matched set of elements against a selector.

The third signature .is( jQuery object ) will check the current matched set of elements against a jQuery object.

The fourth signature .is( function(index) ) will pass each element within the current matched set through a function.

Examples of all four signatures are available in the reference section.

In the example below we select all 'em' elements within the main content, iterate over the collection changing the background colour to orange if the parent is a 'p' element.

$(function(){
  $('#btn5').on('click', function() {
    $('#main em').each(function (index, tableElement) { 
      if ($(this).parent().is('p')) {
          $(this).css('backgroundColor', 'orange'); 
      }
    });
  });
});

The .last() Method  Top

Used to reduce the matched set to the last element.

An example of this methods only signature .last() is available in the reference section.

The .map() Method  Top

Pass each element within the current matched set through a function, producing a new jQuery object containing returned values.

We use this methods only signature .map( callback(index, domElement) ) in the example, where we add to the paragraph below each checkbox value that is checked.

$(function(){
  $('#btn6').on('click', function() {
    $("#yourpies").append( $("#form1 input[type='checkbox']").map(function(){
      if ($(this).is(":checked")) {
          return $(this).val();
      }
    }).get()
      .join(", ") );
  });
});

You like:

The .not() Method  Top

Used to compare the matched set against a specified selector, element, jQuery object or function and return elements that don't match the given arguments.

We will be using the .not( function(index) ) signature for our example which will pass each element within the current matched set through a function and return elements that don't match the given arguments.

The second signature .not( selector ) will reduce the matched set to elements not matching the selector.

The third signature .not( element ) will reduce the matched set to elements not matching the element.

The fourth signature .not( jQuery object ) will reduce the matched set to elements not matching the jQuery object.

Examples of all four signatures are available in the reference section.

In the example below when you press the button below within the table with a class of 'testtable4, we change' the background colour to yellow, dependant upon that cell NOT having a 'strong' element within it.

$(function(){
  $('#btn7').on('click', function() {
    $('.testtable4 td').not(function(index) {
       return $('strong', this).length == 1;
   	}).css('background-color', 'yellow');
  });
});

The .odd() Method  Top

Reduce the matched set to the odd elements, starting at zero.

In the example we select all odd 'td' elements and change the background colour to purple.

$(function(){
  $('#btn11').on('click', function() {
    $('.testtable7 td').odd()
                      .css('backgroundColor', 'purple');
  });
});

The .slice() Method  Top

Used to reduce the matched set to a subset of the specified indices range.

We use this methods only signature .slice(start [, end] ) in the example below. We select all 'td' elements within the table with the class of 'testtable5' and then reduce the matched set to the subsets specified. Remember we start from 0 and stop before the 'end' parameter.

$(function(){
  $('#btn8').on('click', function() {
    $('.testtable5 td').slice(2, 6)
                       .css('backgroundColor', 'orange');
  });
  $('#btn9').on('click', function() {
    $('.testtable5 td').slice(-5, -2)
                       .css('backgroundColor', 'olive');
  });
});

Lesson 1 Complete

In this lesson we learnt how to filter our matched set.

What's Next?

In our first look at manipulating the DOM using jQuery we look at DOM Insertion, Inside.

• <<    jQuery Basics - Position CSS Properties
• DOM Insertion, Inside     >>