The jQuery filter() method can take the selector or a function as its argument to filters the set of matched elements based on a specific criteria.
The supplied selector or function to the filter() method is tested against each element in the set of matched elements and all the elements that matching the supplied selector or pass the function’s test will be included in the result.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").filter(":even").addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
</ul>
</body>
</html>As stated earlier you can also pass a function to the filter() method to filter the set of matched elements based on certain conditions. The following example will test each <li> element within the <ul> and highlight those <li> elements whose indexes are odd numbers i.e. highlights only second and fourth list item as the index is zero-based.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").filter(function(index){
return index % 2 !== 0;
}).addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Last list item</li>
</ul>
</body>
</html>jQuery has() Method
The jQuery has() method filters the set of matched elements and returns only those elements that has the specified descendant element. The following example will highlight all the <li> elements that has the descendant <ul> elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").has("ul").addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>
<ul>
<li>Section 2.1</li>
<li>Section 2.2</li>
<li>Section 2.3</li>
</ul>
</li>
<li>Section 4</li>
</ul>
</body>
</html>jQuery not() Method
The jQuery not() method filters the set of matched elements and returns all elements that does not met the specified conditions. It can take the selector or a function as its argument.
The supplied selector or function to the not() method is tested against each element in the set of matched elements and all the elements that is not matching the supplied selector or pass the function’s test will be included in the result.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery not() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").not(":even").addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
</ul>
</body>
</html>The not() method can take a function as its argument in the same way that filter() does, but it works just opposite of the filter() method i.e. the elements that pass the function’s test are excluded and rest the elements are included in the result.
The following example will test each <li> element within the <ul> and highlight those <li> elements whose indexes are not the odd numbers i.e. highlights first and third list item.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery not() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").not(function(index){
return index % 2 !== 0;
}).addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
</ul>
</body>
</html>jQuery slice() Method
The jQuery slice() method filters the set of matched elements specified by a range of indices. This method accepts start and end (optional) index number as arguments, where the start index specifies the position at which the elements begin to be selected and the end index specify the position at which the elements stop being selected.
The following example will highlight the first and second <li> elements within the <ul> element by adding the class .highlight on document ready.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slice() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").slice(0, 2).addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
</ul>
</body>
</html>You can also specify a negative index numbers. A negative index number indicates a position starting from the end of the set, rather than the beginning. For example, the slice(-2, -1) only highlight the third list item, since it is the only item in the range between two from the end (-2) and one from the end (-1), as end position is not included in result.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slice() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").slice(-2, -1).addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
</ul>
</body>
</html>