jQuery Filtering
In this tutorial you will learn how to filter element's selection using jQuery.
Filtering the Elements Selection
jQuery provides several methods such as filter(), first(), last(), eq(), slice(), has(), not(), etc. that you can use to narrow down the search for elements in a DOM tree.
jQuery first() Method
The jQuery first() method filters the set of matched elements and returns the first element from the set. The following example will only highlight the first <li> element within the <ul> element by adding the class .highlight on document ready.
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery first() 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").first().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 last() Method
The jQuery last() method filters the set of matched elements and returns the last element from the set. The following example will only highlight the last <li> element within the <ul> element by adding the class .highlight on document ready.
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery last() 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").last().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 eq() Method
The jQuery eq() method filters the set of matched elements and returns only one element with a specified index number. The following example will highlight the second <li> element within the <ul> element by adding the class .highlight on document ready.
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() 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").eq(1).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>Note: The index supplied to the eq() method indicates the 0-based position of the element that means the index 0 target the first element, the index 1 targets the second element and so on. Also this index refers to the position of the element within the jQuery object, not within the DOM tree.
You can also specify a negative index number. A negative index number indicates a position starting from the end of the set, rather than the beginning. For example, the eq(-2) indicates the second last element within the set of matched elements.
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() 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").eq(-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>jQuery filter() Method
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
Try this code »<!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
Try this code »<!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
Try this code »<!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
Try this code »<!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
Try this code »<!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
Try this code »<!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
Try this code »<!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>
