Updated April 1, 2023
Introduction to jQuery filter
jQuery filter() method is basically used to narrow down the search for the HTML elements in a DOM tree. This method extracts and returns the elements from a set of matched elements that match based on a certain criteria. jQuery filter() method takes either the selector or a function as its argument and filters the set of matched elements against a specific condition. The .not() method is the opposite of the filter(). The .not() method matches and returns the selection those do not match the specified criteria. The selector or the function passed as an argument to the method is tested against each element in the set of matched elements and all those matching will be returned as the result. These DOM traversal methods allow the developers to select HTML elements in a document randomly or sequentially.
Syntax:
$(selector).filter(criteria, function(index))Where, criteria is an optional parameter which specifies a selector expression or a jQuery object or one or more elements to be returned from a list of selected elements.
- function(index)is also an optional parameter which specifies a function to run for each element in the list of selected elements.
- The element is kept if it returns true otherwise the element is removed.
- index specifies the index position of the element in the list.
Examples of jQuery filter
Given below are the examples are mentioned
Example #1
Following example illustrates how the jQuery filter() method can be used to filter out the set of matched elements against a specified criteria by passing a selector to the method.
Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Example for jQuery filter using selectors</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
$("ul li").filter(":even").addClass("highlight");
});
</script>
<style>
#divstyle {
background-color: cadetblue;
width: 350px;
height: 200px;
padding-top: 20px;
}
.highlight {
background: lightslategray;
}
</style>
</head>
<body>
<h2>Unordered List</h2>
<div id="divstyle">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</body>
</html>Output:
- In this example, each <li> element within the list is tested and only those <li> elements are highlighted whose indexes are even numbers.
Example #2
Following example is an another similar illustration of how the jQuery filter() method can be used to filter the set of matched elements against a specified criteria using a function.
Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Example for jQuery filter using function</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").filter(function(index){
return index % 2 !== 0;
}).addClass("highlight");
});
</script>
<style>
#divstyle {
background-color: cadetblue;
width: 350px;
height: 200px;
padding-top: 20px;
}
.highlight {
background: lightslategray;
}
</style>
</head>
<body>
<h2>Unordered List</h2>
<div id="divstyle">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</body>
</html>Output
- In this example, each <li>element within the list is tested and only those <li>elements are highlighted whose indexes are odd numbers.
Example #3
Following example is an another similar illustration of how the jQuery filter() method can be used to filter the elements against a specified criteria by passing a function to it.
Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Example for jQuery filter using function</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$( "ul li" ).filter(function( index ) {
return $( "strong", this ).length === 1;
}).css( "background-color", "yellow" );
});
</script>
<style>
#divstyle {
background-color: cadetblue;
width: 350px;
height: 200px;
padding-top: 20px;
}
.highlight {
background: lightslategray;
}
</style>
</head>
<body>
<h2>Unordered List</h2>
<div id="divstyle">
<ul>
<li><strong>Item 1</strong></li>
<li>Item 2</li>
<li>Item 3</li>
<li><strong>Item 4</strong></li>
<li>Item 5</li>
<li><strong>Item 6</strong></li>
<li><strong>Item 7</strong></li>
<li>Item 8</li>
</ul>
</div>
</body>
</html>Output:
- In this example, a function is used with the method to filter the elements.
- Each<li> element within the selected list is tested against the specified criteria and will only be included in the filtered set if the function returns “true”.
- Here, each <li> element is tested for containing <strong> tag and only those elements are included in the filtered set (shown as highlighted in yellow color)which contain <strong> tag.
- This refers to the current DOM element.
Example #4
In the following example, jQuery filter() method uses multiple criteria to filter the elements from the selected set of HTML elements.
Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Example for jQuery filter using multiple criteria</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".pclass,#pid").css("background-color", "yellow");
});
</script>
<style>
#divstyle {
background-color: cadetblue;
width: 400px;
height: 200px;
padding-top: 20px;
padding-left: 5px;
}
.highlight {
background: lightslategray;
}
</style>
</head>
<body>
<h2>jQuery filter using multiple criteria</h2>
<div id="divstyle">
<p id = "pid">This article discusses jQuery filter functionality</p>
<p>filter method narrows down the search for HTML elements</p>
<p class = "pclass">jQuery filter function uses selectors or functions to filter the elements</p>
<p class ="pclass_1">Here, we are using multiple criteria to filter</p>
</div>
</body>
</html>Output:
- In this example filter method uses multiple criteria to filter the matched elements.
- The method returns all the <p> elements with class “pclass” and id “pid” which is displayed by yellow highlighter as shown below.
Conclusion
In this article, we saw about the jQuery filter functionality which basically filters out all the elements that match a specified criteria and the filtered set of elements is returned. jQuery filter() method is used to perform filtering using a selector or a function passed as parameters to it. jQuery filter functionality is helpful in making the users’ job easier by narrowing down the search for HTML elements.
Recommended Articles
This is a guide to jQuery filter. Here we discuss the introduction of jQuery filter along with examples for better understanding. You may also have a look at the following articles to learn more –
