jQuery Traversing - Filtering


The first(), last(), eq(), filter() and not() Methods

The first(), last(), and eq() filtering methods let you to choose a specific element depending on its location in a set of items.

Additional filtering techniques such as filter() and not() can pick items that fit specific criteria or do not meet them.

You can also search for these topics, jquery traversing filtering ancestors, traversing filtering siblings and parents using jquery, dom to execute jquery traversing filtering, next sibling using jquery traversing filtering, jquery traverse filtering before the method, jquery traverse filtering html, object and properties in jquery traversing filtering, form elements the jquery traverse filtering.

jQuery first(), last(), and eq() Methods

The first() method returns the first element of the items given.

The last() method returns the last element of the choosen items.

The eq() function returns an element with a certain index number of the items chosen. The number of the index is starting from "0" not "1".

Example:-

Select the first < div> element from the following example :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b1").click(function () {
            $("div").first().css("background-color", "yellow");
        });
        $("#b2").click(function () {
            $("p").last().css("background-color", "red");
        });
        $("#b3").click(function () {
            $("p").eq(2).css("background-color", "green");
        });
    });
</script>
</head>
<body>

<p>This is paragraph 1 (index 0 , p = 0).</p>
<div>This is div 1 (index 1 , div = 0)</div><br />
<p>This is paragraph 2 (index 2 , p = 1).</p>
<p>This is paragraph 3 (index 3 , p =2).</p>
<div>This is div 2 (index 4 , div = 1)</div><br />
<p>This is paragraph 4 (index 5 , p = 3).</p>

<button id="b1">Select FIRST DIV Tag</button><br /><br />
<button id="b2">Select LAST P Tag</button><br /><br />
<button id="b3">Select Specific P Tag (2nd paragraph)</button><br /><br />

</body>
</html>

Output :-

This is paragraph 1 (index 0 , p = 0).

This is div 1 (index 1 , div = 0)

This is paragraph 2 (index 2 , p = 1).

This is paragraph 3 (index 3 , p =2).

This is div 2 (index 4 , div = 1)

This is paragraph 4 (index 5 , p = 3).








You can also search for these topics, jquery select first-child with class, how to select first element using first() method, how to matching parent first-child of-type and parents using jquery, jquery execute multiple elements first() method , multiple selectors used in jquery first() method, hide, post, then show the jquery first method.
You can also search for these topics, jquery last child and element with class name, last-of-type in jquery, nth-last-child in jquery, appended element using last method in jquery, jquery last method both html and xml documents, load the jquery last() method, keyup method to removing the jquery last() method, post and get elements, data and element, example for jquery last() method.
You can also search for these topics, multiple elements and events in jquery eq() method, differenciate jquery eq vs index method, check the range of jquery eq, selector multiple element using jquery eq() method, working and executing of jquery eq method before page load, how to hide selected elements using eq method in jquery, example for eq() method.

jQuery filter() and not() Methods

You may use the filter() function to provide a set of criteria or conditions. Elements not matching the criteria are deleted and the matching elements returned.

The method not() retrieves all elements which do not meet the requirements or conditions.

Tip : The not() procedure is the reverse of the filter().

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b7").click(function () {
            $("p").filter(".intro").css("background-color", "yellow");
        });
        $("#b8").click(function () {
            $("p").not(".intro").css("background-color", "lightblue");
        });
    });
</script>
</head>
<body>

<p>Paragraph 1.</p>
<p class="intro">Paragraph 2.</p>
<p class="intro">Paragraph 3.</p>
<p>Paragraph 4.</p>

<button id="b7">Filter</button>
<button id="b8">Not</button><br /><br />

</body>
</html>

Output :-

Paragraph 1.

Paragraph 2.

Paragraph 3.

Paragraph 4.




The "filter" button will select all p tags with class="intro".

The "not" button will select all p tags without or which don't have class="intro".

You can also search for these topics, multiple conditions and values works on jquery filter, multiple selectors used jquery filter() method, to filter based on condition use in jquery, jquery filter method on attribute, example for jquery filter() method, selector multiple not method in jquery, multiple classes used jquery not selector, attribute and contains not used in jquery, selector not working in jquery not(), javascript not() selector, example for jquery not() method.