Filtering Elements JQ Home  <<  JQ Intermediate  <<  Filtering Elements

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.
Filtering Methods Description
.eq()Reduce the matched set to the element at the specified index.
.even()Reduce the matched set to the even elements, starting at zero.
.filter()Reduce the matched set to elements that match the specified selector, element, jQuery object or pass the function's test.
.first()Reduce the matched set to the first element.
.has()Reduce the matched set to to those elements that have a descendant that matches the specified selector or DOM element.
.is()Compare the matched set against a specified selector, element, jQuery object or function and return true if any element matches the given arguments.
.last()Reduce the matched set to the last element.
.map()Pass each element within the current matched set through a function, producing a new jQuery object containing returned values.
.not()Compare the matched set against a specified selector, element, jQuery object or function and return elements that don't match the given arguments.
.odd()Reduce the matched set to the odd elements, starting at zero.
.slice()Reduce the matched set to a subset of the specifed indices range.

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.

Table For Testing The .eq( index ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 


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

Press the button below to action the above code:

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.

Table For Testing The .even() Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 



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

Press the button below to action the above code:

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.

Table For Testing The .filter( jQuery object ) Signature
Table Row 1, Table Data 1 (class of class1) Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 (class of class1) 


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

Press the button below to action the above code:

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.

Table For Testing The .first() Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 


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

Press the button below to action the above code:

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 'i' descendant and turn the background colour yellow.


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

Press the button below to action the above code:

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 'i' 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() {
    $('.content i').each(function (index, tableElement) { 
      if ($(this).parent().is('p')) {
          $(this).css('backgroundColor', 'orange'); 
      }
    });
  });
});

Press the button below to action the above code:

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.

Pie Survey

Which pies do you like?:


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

You like:


Press the button below to action the above code:

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.

Table For Testing The .not( function(index) ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 


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

Press the button below to action the above code:

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.

Table For Testing The .odd() Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 



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

Press the button below to action the above code:

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.

Table For Testing The .slice(start [, end] ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2 


$(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');
  });
});

Press the button below to action the above code:

           

Lesson 1 Complete

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

Reference

Methods

Attributes and Properties - .css() method
Attributes & Properties - .val() method
Events - .on() method
Filtering - .eq() method
Filtering - .filter() method
Filtering - .first() method
Filtering - .has() method
Filtering - .is() method
Filtering - .last() method
Filtering - .map() method
Filtering - .not() method
Filtering - .slice() method
Tree Traversal - .parent() method