jQuery filter() Method

The jQuery filter() method returns elements that match a certain criteria. This method constructs a new jQuery object from a subset of the matching elements . The supplied criteria is tested against each element. Elements that do not match the criteria are removed from the selection, and those that match will be returned. Syntax
$(selector).filter(criteria,function(index))

All filters begin with a colon, such as :first, :last, :even.

$('li').filter(':odd').css('color', 'Blue');
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul>
run this source code Browser View
  • One
  • Two
  • Three
  • Four
Full Source
<!DOCTYPE html> <html lang="en"> <head> <title>jQuery filter() method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('li').filter(':odd').css('color', 'Blue'); }); </script> </head> <body> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> </body> </html>

jQuery filter with Examples

jQuery provides several filters such as :first, :last, :eq() etc. The short list of filter elements below that you can use to narrow down the search for elements in a DOM tree.

  1. :first - First matched element of the selector's returned set.

  2. :last - Last and single instance of the element matching the selector's returned set.

  3. :even - Even elements with a zero-based index within the matched set.

  4. :odd - Odd elements with zero-based indexing within the matched set.

  5. :eq(index) - Element that is equal to the given index n within the matched set.

  6. :gt(index) - All elements that are greater than the given zero-based index within the matched set.

  7. :lt(index) - All elements that are less than the given zero-based index within the matched set.

  8. :animated - All elements that are currently being animated at the time the selector is run.

  9. :header - All header elements (H1...H6).

  10. :not - All elements that do not match the given selector.

  11. :checkbox - All elements that match the type checkbox.

  12. :contains(text) - String of text (case sensitive).

  13. :disabled - All elements that are disabled.

  14. :enabled - All elements that are enabled.

  15. :file - All elements of a certain file type.

jQuery :first example

$( "li:first" ).css( "background-color", "blue" );

jQuery :last example

$( "li:last" ).css( "background-color", "red" );

jQuery :even example

$( "li:even" ).css( "font-style", "italic" );

jQuery :odd example

$( "li:odd" ).css( "font-weight", "bold" );

jQuery :eq example

$( "li:eq( 2 )" ).css( "background-color", "pink" );

jQuery :gt example

$( "li:gt(6)" ).css( "text-decoration", "underline" );
run this source code Browser View
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine
  • Tem
Full Source
<!DOCTYPE html> <html lang="en"> <head> <title>jQuery filter() method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $( "li:first" ).css( "background-color", "blue" ); $( "li:last" ).css( "background-color", "red" ); $( "li:even" ).css( "font-style", "italic" ); $( "li:odd" ).css( "font-weight", "bold" ); $( "li:eq(2)" ).css( "background-color", "pink" ); $( "li:gt(6)" ).css( "text-decoration", "underline" ); }); </script> </head> <body> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> <li>Tem</li> </ul> </body> </html>