jQuery Filtering

To restrict the search for items in a DOM tree, jQuery provides numerous methods such as filter(), first(), last(), eq(), slice(), has(), not(), and so on.

jQuery first() Method

The first() function of the jQuery library filters the set of matched elements and returns the first element in the set. By using the class, the following example will only highlight the first <li> element within the <ul> element. highlight on document ready.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Select the First Element</h1>
<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Four list item</li>
    <li>Five list item</li>
    <li>Six list item</li>
</ul>

<script>
    $(document).ready(function(){
        $("ul li").first().css({"color": "#00ab55"});
    });
</script>
</body>
</html>

Preview

jQuery last() Method

The last() function of jQuery filters the set of matched elements and returns the final element in the set. By using the class, the following example will only highlight the final <li> element within the <ul> element.highlight on document ready.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Select the Last Element</h1>
<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Four list item</li>
    <li>Five list item</li>
    <li>Six list item</li>
</ul>

<script>
    $(document).ready(function(){
        $("ul li").last().css({"color": "#ff4842"});
    });
</script>
</body>
</html>

Preview

jQuery of eq() Method

The eq() function of jQuery filters the set of matched items and returns just one element with the supplied index number. The following example uses the class to highlight the second <li> element within the <ul> element.highlight on document ready.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Select an Element by Index</h1>
<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Four list item</li>
    <li>Five list item</li>
    <li>Six list item</li>
</ul>

<script>
    $(document).ready(function(){
        $("ul li").eq(2).css({"color": "#ffc107"});
    });
</script>
</body>
</html>

Preview

A negative index number is also possible. A negative index number denotes a location in the set that begins at the end rather than the beginning. For instance, eq(-2) denotes the second last member in the collection of matched items.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Select an Element by Negative Index</h1>
<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Four list item</li>
    <li>Five list item</li>
    <li>Six list item</li>
</ul>

<script>
    $(document).ready(function(){
        $("ul li").eq(-2).css({"color": "#1890ff"});
    });
</script>
</body>
</html>

Preview

jQuery filter() Method

To filter the collection of matched components based on a given criteria, the jQuery filter() method accepts a selector or a function as an argument.

The filter() method tests the specified selector or function against each element in the set of matched elements, and any items that match the supplied selector or pass the function's test are included in the result.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Filter the Selection of Elements by Selectors</h1>
<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Four list item</li>
    <li>Five list item</li>
    <li>Six list item</li>
</ul>

<script>
    $(document).ready(function(){
        $("ul li").filter(":odd").css({"color": "#00ab55"});
    });
</script>
</body>
</html>

Preview

As previously indicated, you can also supply a function to the filter() method to filter the list of matched components depending on certain criteria. The following example will test each <li> element within the <ul> and highlight those <li> elements with odd indices, highlighting just the second and fourth list items because the index is zero-based.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Filter the Selection of Elements by Function</h1>
<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Four list item</li>
    <li>Five list item</li>
    <li>Six list item</li>
</ul>

<script>
    $(document).ready(function(){
        $("ul li").filter(function(index){
            return index % 2 !== 1;
        }).css({"color": "#ff4842"});
    });
</script>
</body>
</html>

Preview

jQuery has() Method

The has() function of jQuery filters the list of matched items and returns only those that have the provided descendant element. The example below will highlight all <li> elements that have descendent <ul> elements.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Select Elements that Contain Specific Child Elements</h1>
<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>
        <ul>
            <li>list 1</li>
            <li>list 2</li>
        </ul>
    </li>
    <li>Five list item</li>
    <li>Six list item</li>
</ul>

<script>
    $(document).ready(function(){
        $("ul li").has("ul").css({"color": "#ffc107"});
    });
</script>
</body>
</html>

Preview

jQuery not() Method

The not() function of jQuery filters the collection of matched items and returns all elements that do not meet the supplied requirements. It can be sent a selection or a function as an argument.

The not() method tests the specified selector or function against each element in the set of matched elements, and those items that do not match the supplied selection or pass the function's test are included in the result.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Select Elements that Doesn't Match a Condition</h1>
<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Four list item</li>
    <li>Five list item</li>
    <li>Six list item</li>
</ul>

<script>
    $(document).ready(function(){
        $("ul li").not(":even").css({"color": "#1890ff"});
    });
</script>
</body>
</html>

Preview

jQuery slice() Method

The slice() function of jQuery filters the set of matched elements defined by an index range. This method accepts start and end (optional) index numbers as parameters, where the start index determines where the elements begin to be selected and the end index specifies where the elements finish being picked.

The following example uses the class to highlight the first and second <li> items within the <ul> element. highlight on document ready.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>

<h1>Select the Elements by Range of Indices</h1>
<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
    <li>Four list item</li>
    <li>Five list item</li>
    <li>Six list item</li>
</ul>

<script>
    $(document).ready(function(){
        $("ul li").slice(0, 3).css({"color": "#00ab55"});
    });
</script>
</body>
</html>

Preview

jQuery Siblings

jQuery AJAX

jQuery Filtering

jQuery first() Method

Example

jQuery last() Method

Example

jQuery of eq() Method

Example

Example

jQuery filter() Method

Example

Example

jQuery has() Method

Example

jQuery not() Method

Example

jQuery slice() Method

Example

Links

Tutorials

Connect with us