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>

- One
- Two
- Three
- Four
<!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.
- :first - First matched element of the selector's returned set.
- :last - Last and single instance of the element matching the selector's returned set.
- :even - Even elements with a zero-based index within the matched set.
- :odd - Odd elements with zero-based indexing within the matched set.
- :eq(index) - Element that is equal to the given index n within the matched set.
- :gt(index) - All elements that are greater than the given zero-based index within the matched set.
- :lt(index) - All elements that are less than the given zero-based index within the matched set.
- :animated - All elements that are currently being animated at the time the selector is run.
- :header - All header elements (H1...H6).
- :not - All elements that do not match the given selector.
- :checkbox - All elements that match the type checkbox.
- :contains(text) - String of text (case sensitive).
- :disabled - All elements that are disabled.
- :enabled - All elements that are enabled.
- :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" );

- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
- Nine
- Tem
<!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>
Related Topics
- jQuery Interview Questions (Part-2)
- jQuery Interview Questions (Part-3)
- Is jQuery a programming language?
- Why do we need to go for JQuery?
- How to check jQuery version?
- How to multiple version of jQuery?
- What is jQuery CDN?
- Advantages of minified version of JQuery
- How do I check if the DOM is ready?
- How to Use the jQuery load() Method
- Difference between document.ready() and body onload()?
- Is jQuery is a replacement of JavaScript?
- JQuery or JavaScript which is quicker in execution?
- What is the use of param() method?
- How to work with jQuery parent(), children() and siblings()?
- Difference between parent() and parents() in jQuery?
- What does jQuery data() function do?
- How do you check if an element exists or not in jQuery?
- How do I check if an HTML element is empty using jQuery?
- How to run an event handler only once in jQuery?
- How to disable/enable an element with jQuery
- Hide and show image on button click using jQuery
- Difference Between Prop and Attr in jQuery
- How do I check if an element is hidden in jQuery?
- What happen if you return false from a jQuery event handler?
- What is each() function in jQuery? How do you use it?
- Which one is more efficient, document.getElementbyId( "myId") or $("#myId)?
- What is the difference between $.map and $.grep in jQuery
- What is the use of serialize method in jQuery
- What is the use of clone method in jQuery?
- What is event.PreventDefault in jQuery?
- Difference between event.PreventDefault and event.stopPropagation?
- What are deferred and promise object in jQuery?
- What are source maps in jQuery?
- What does the jQuery migrate function do?
- Differences Between jQuery .bind() and .live()?
- How can you delay document.ready until a variable is set?
- How to disable cut,copy and paste in TextBox using jQuery?
- How to prevent Right Click option using jquery?
- How does the jQuery pushStack function work?
- Difference between find() and closest() in jquery?
- How To Use Ajax In Jquery?
- How to multiple AJAX requests be run simultaneously in jQuery?
- Can we call C# code behind using jQuery?
- How to include jQuery in ASP.Net project?
- Need to add jQuery file in both Master and Content page?
- Uncaught TypeError: $(…).modal is not a function jquery
- How to check whether a checkbox is checked in jQuery?
- Uncaught ReferenceError: $ is not defined
- How to Convert JSON Date to JavaScript/jQuery date