jQuery Filtering
filter(), first(), last(), eq(), slice(), has(), not(), and other jQuery methods may be used to narrow down the quest for elements in a DOM tree.
The first() method
The first() method of the jQuery library filters the collection of matched elements and returns the first one. By adding the class .highlight on document ready, the following example will only highlight the first <li> element inside the <ul> element.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<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>
Live Demo!
The last() method
The last() method of the jQuery library filters the collection of matched elements and returns the last one. By applying the class to the last <li> element within the <ul> element, the following example would only highlight the last <li> element within the <ul> element.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<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>
Live Demo!
The eq() method
The eq() method of the jQuery library filters the collection of matched elements and returns only one element with a given index number. By adding the class to the second <li> element within the <ul> element, the following example will highlight it.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<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>
Live Demo!
The filter() method
To filter the collection of matched elements based on a given criterion, the jQuery filter() method may take a selector or a function as an argument.
Each element in the set of matched elements is evaluated against the supplied selector or feature, and all elements that match the supplied selector or pass the function's test are included in the result.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<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>Last list item</li>
</ul>
</body>
</html>
Live Demo!
The has() method
The has() method of the jQuery library filters the collection of matched elements, returning only those that have the defined descendant element. Both <li> elements with descendant <ul> elements will be highlighted in the following example.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<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>
Live Demo!
The not() method
The not() method of the jQuery library filters the collection of matched elements and returns all elements that do not meet the required criteria. As an argument, it may take either a selector or a function.
The not() method compares each element in the set of matched elements to the supplied selector or function, and all elements that do not match the supplied selector or pass the function's test are included in the result.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<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>Last list item</li>
</ul>
</body>
</html>
Live Demo!
The slice() method
The jQuery slice() method narrows down the collection of matched elements based on a set of indices. The start and end (optional) index numbers are passed as arguments to this process, with the start index indicating where the elements begin to be selected and the end index indicating where the elements stop being selected.
The class will be used to highlight the first and second <li> elements within the <ul> element in the following example.
<!DOCTYPE html>
<html>
<head>
<title>Learning jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight{
background: yellow;
}
</style>
<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>Last list item</li>
</ul>
</body>
</html>
Live Demo!