Login
Home AI Coder Write To Earn Work With Us Code Editor Blog Report/Complaint Refer And Earn
Library Certifications Online Courses Search E-Books AI Coder Login
AI Coder

jQuery Filtering

Previous Page Next Page

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 that set. In the example below, only the first <li> element within the <ul> element will be highlighted by adding the class .highlight when the document is 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 that set. In the example below, only the last <li> element within the <ul> element will be highlighted by adding the class .highlight when the document is 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. In the example below, the second <li> element within the <ul> element will be highlighted by adding the class .highlight when the document is 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. This means index 0 targets the first element, index 1 targets the second element, and so on. It's important to note that 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 with the eq() method. A negative index number indicates a position counting from the end of the set, rather than from the beginning. For instance, eq(-2) refers to the second-to-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 a selector or a function as its argument to filter the set of matched elements based on specific criteria.

The provided selector or function within the filter() method is applied to each element in the set of matched elements. Elements that match the 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 mentioned earlier, you can also pass a function to the filter() method to filter the set of matched elements based on specific conditions. The following example will test each <li> element within the <ul> and highlight those <li> elements whose indexes are odd numbers (0-based index), highlighting the second and fourth list items.

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 have the specified descendant element. In the example below, all <li> elements that have descendant <ul> elements will be highlighted.

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 do not meet the specified conditions. It can take a selector or a function as its argument.

The provided selector or function within the not() method is applied to each element in the set of matched elements. Elements that do not match the selector or fail 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, similar to how filter() does, but it operates in the opposite manner. This means elements that pass the function's test are excluded, while the rest of the elements are included in the result.

In the example below, each <li> element within the <ul> is tested. The <li> elements whose indexes are not odd numbers will be highlighted, thereby highlighting the first and third list items.

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 a start and an end (optional) index number as arguments. The start index specifies the position at which elements begin to be selected, and the end index specifies the position at which elements stop being selected.

In the example below, the first and second <li> elements within the <ul> element will be highlighted by adding the class .highlight when the document is 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 negative index numbers with the slice() method. A negative index number indicates a position counting from the end of the set, rather than from the beginning. For example, slice(-2, -1) will highlight only the third list item, as it is the only item in the range from two positions from the end (-2) to one position from the end (-1), with the end position not included in the 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>
Previous Page Next Page