Home >> jquery >> jQuery Filtering

jQuery Filtering

in jQuery numerous methods that can narrow down the search for elements in a DOM tree are provided and they are as follows;

filter()
first()
last()
eq()
slice()
has()
not()

jQuery first() Method

The jQuery first() method is employed to filter the set of matched elements and return the first element from the set. Only the first <li> element within the <ul> element is highlighted in the example below by adding the class .highlight on document ready.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting the First Element in jQuery</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>
	<h2>Unordered List</h2>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
	<hr>
	<h2>Another Unordered List</h2>
	<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 last() Method

The jQuery last() method is usually employed to filter the set of matched elements and return the last element from the set. Only the last <li> element within the <ul> element is highlighted in the example below by adding the class .highlight on document ready.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting the Last Element in jQuery</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>
	<h2>Unordered List</h2>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
	<hr>
	<h2>Another Unordered List</h2>
	<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 eq() Method

The jQuery eq() method is employed to filter the set of matched elements and return only one element with a specified index number. The example below highlights the second <li> element within the <ul> element by adding the class .highlight on document ready.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting an Element by Index in jQuery</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>
	<h2>Unordered List</h2>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
	<hr>
	<h2>Another Unordered List</h2>
	<ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

A negative index number that indicates a position starting from the end of the set, rather than the beginning can be specified. For instance, the second last element within the set of matched elements is indicated by eq(-2).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting an Element by Negative Index in jQuery</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>
	<h2>Unordered List</h2>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
	<hr>
	<h2>Another Unordered List</h2>
	<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

In the jQuery filter() method, a selector or a function can be taken as its argument to filter the set of matched elements based on specific criteria.

In the jQuery filter () method, the supplied selector or function employed in the method is tested against each element in the set of matched elements. However, all the elements that matched the supplied selector or passed the function's test will be part of the final result.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Filtering the Selection of Elements in jQuery via Selectors</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>
	<h2>Unordered List</h2>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
	<hr>
	<h2>Another Unordered List</h2>
	<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 earlier stated, a function to the filter() method can be employed to filter the set of matched elements based on certain conditions or criteria. The example below shows each <li> element tested within the <ul> and highlights those <li> elements whose indexes are odd numbers. This simply implies that only the second and fourth list item highlighted as the index is zero-based.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Filtering the Selection of Elements in jQuery via Function</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>
	<h2>Unordered List</h2>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
	<hr>
	<h2>Another Unordered List</h2>
	<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 has() Method

In the jQuery has() method, the set of matched elements is filtered and only those elements thave has the specified descendant element are returned. All the <li> elements that has the descendant <ul> elements are highlighted in the example below.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting Elements that Contain Specific Child Elements in jQuery</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

In the jQuery not() method, the set of matched elements is filtered and all elements that don’t meet the specified conditions or criteria are returned. jQuery not() method can employ the selector or a function as its argument.

When the supplied selector or function to the jQuery not() method is tested against each element in the set of matched elements, then all the elements that don’t pass the function's test or match the supplied selector will be part of the final result.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting Elements that Doesn't Match a Condition in jQuery</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>
	<h2>Unordered List</h2>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
	<hr>
	<h2>Another Unordered List</h2>
	<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 employ a function as its argument in the same manner that filter() does, but it works in contrast to the filter() method. This simply means the elements that pass the function's test are excluded while the remaining elements are added to the final result.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting Elements that Didn't Pass a Function Test in jQuery</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>
	<h2>Unordered List</h2>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
	<hr>
	<h2>Another Unordered List</h2>
	<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

In the jQuery slice() method, the set of matched elements specified by a range of indices is filtered. This method acknowledges start and end (optional) index number as arguments, whereby the start index specifies the position at which the selection of elements begin and the end index specifies the position at which the selection of elements stop.

The example below highlights just the first and second <li> elements within the <ul> element by adding the class .highlight on document ready.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting the Elements by Range of Indices in jQuery</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>
	<h2>Unordered List</h2>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
	<hr>
	<h2>Another Unordered List</h2>
	<ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

In the jQuery slice method(), negative index numbers can also be specified. This earlier stated index number indicates a position starting from the end of the set, instead of the beginning. For instance, the slice(-2, -1) only highlights 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 the end position won’t be part of the final result.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting the Elements by Range of Negative Indices in jQuery</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>
	<h2>Unordered List</h2>
    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
	<hr>
	<h2>Another Unordered List</h2>
	<ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
        <li>Fourth list item</li>
    </ul>
</body>
</html>

-Advertisement-