.filter() JQ Home  <<  Filtering  <<  .filter()

Filter a subset of elements.

Description

The .filter() method is used to reduce the matched set to elements that match the specified selector, element, jQuery object or pass the function's test.

Syntax

Signature Description
.filter( selector )Reduce the matched set to elements that match the selector.
.filter( element )Reduce the matched set to elements that match the element.
.filter( jQuery object )Reduce the matched set to elements that match the jQuery object.
.filter( function(index) )Pass each element within the current matched set through a function.

Parameters

Parameter Description Type
selectorA string containing a CSS or custom jQuery selector to match elements against.Selector
elementAn element to match elements against.Element
jQuery objectA jQuery object to match elements against.jQuery
function(index)A function.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The callback is fired in the context of the current element in the set, so the keyword this refers to that element.
 Function

Return

A jQuery object containing the filtered subset of elements.

.filter( selector ) Example  Filtering  <<  Top

Reduce the matched set to elements that match the selector.

In the example below when the button is pressed select all 'td' elements within the table with an id of 'testtable' and then filter the 'td' element with the id of 'tdid1', changing the background colour to olive.

Table For Testing The .filter( selector ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 (id of tdid1) Table Row 2, Table Data 2 


$(function(){
  $('#btn1').on('click', function() {
    $('.testtable td').filter('#tdid1')
                      .css('backgroundColor', 'olive'); 
  });
});

Press the button below to action the above code:

.filter( element ) Example  Filtering  <<  Top

Reduce the matched set to elements that match the element.

In the example below when the button is pressed select all elements within the table with an id of 'testtable2' and then filter the 'td' element , changing the background colour to orange.

Table For Testing The .filter( element ) Signature
Heading 1 Description 1
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Heading 1 Description 1
Table Row 2, Table Data 1 Table Row 2, Table Data 2 


$(function(){
  $('#btn2').on('click', function() {
    $('.testtable2 *').filter('td').css('backgroundColor', 'orange'); 
  });
});

Press the button below to action the above code:

.filter( jQuery object ) Example  Filtering  <<  Top

Reduce the matched set to elements that match the jQuery object.

In the example below when the button is pressed select all 'td' elements with a class of 'class1', within the table with a class of 'testtable3' 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(){
  $('#btn3').on('click', function() {
    var $td = $('.testtable3 .class1');
    $('.testtable3 td').filter($td).css('backgroundColor', 'silver'); 
  });
});

Press the button below to action the above code:

.filter( function(index) ) Example  Filtering  <<  Top

Pass each element within the current matched set through a function.

  • If the function returns true, the element will be included in the filtered set.

In the example below when the button is pressed change the background colour to yellow within the table with a class of 'testtable4', dependant upon that cell having a 'b' element within it.

Table For Testing The .filter( 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(){
  $('#btn4').on('click', function() {
    $('.testtable4 td').filter(function(index) {
       return $('b', this).length === 1;
    }).css('background-color', 'yellow');
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Intermediate Tutorials - Lesson 1 - Filtering Elements