jQuery - jQuery Traversing with Filtering:

In jQuery, traversing allows you to navigate the DOM tree (parents, children, siblings, etc.), and filtering lets you narrow down the selection to specific elements that meet certain criteria. Filtering is especially useful when you have selected multiple elements and only want to act on a subset.

1. Basic Concept

$(selector).traversingMethod().filter(filterSelector);
$(selector).traversingMethod().not(excludeSelector);

  • .filter() → Keeps elements that match the selector or criteria.

  • .not() → Removes elements that match the selector or criteria.

  • .eq(index) → Selects element at a specific index.

  • .first() / .last() → Selects the first or last element in a selection.

2. .filter() Method

  • Reduces the selection to elements matching the filter.

Syntax:

$(selector).filter(selectorOrFunction);

Example 1: Filter by class

$("li").filter(".active").css("background","yellow");

Example 2: Filter by function

$("li").filter(function(index){
    return index % 2 === 0; // Select even-indexed <li>
}).css("color","red");

3. .not() Method

  • Removes elements from the selection matching the filter.

Syntax:

$(selector).not(selectorOrFunction);

Example 1: Exclude by class

$("li").not(".active").css("color","gray");

Example 2: Exclude by index

$("li").not(":first").css("font-weight","bold"); // All except first

4. .eq() Method

  • Selects an element by index (zero-based).

Syntax:

$(selector).eq(index);

Example:

$("li").eq(2).css("background","lightblue"); // 3rd item

5. .first() and .last() Methods

  • .first() → Selects the first element in a set.

  • .last() → Selects the last element in a set.

Example:

$("li").first().css("text-decoration","underline");
$("li").last().css("text-decoration","line-through");

6. .has() Method

  • Selects elements that contain specific descendants.

Syntax:

$(selector).has(selector);

Example:

$("div").has("p").css("border","2px solid green"); // All <div> that contain <p>

7. .is() Method

  • Checks if at least one element matches a selector. Returns true/false.

Example:

if ($("#item1").is(".active")) {
    alert("Item 1 is active");
}

8. Example: Filtering in Action

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Traversing - Filtering</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(function(){
        // Filter by class
        $("li").filter(".active").css("background","yellow");

        // Exclude by class
        $("li").not(".active").css("color","gray");

        // Select by index
        $("li").eq(2).css("font-weight","bold");

        // First and last
        $("li").first().css("text-decoration","underline");
        $("li").last().css("text-decoration","line-through");

        // Has descendant
        $("ul").has("li.active").css("border","2px solid green");
    });
    </script>
</head>
<body>
    <ul>
        <li id="item1">Item 1</li>
        <li id="item2" class="active">Item 2</li>
        <li id="item3">Item 3</li>
        <li id="item4" class="active">Item 4</li>
    </ul>
</body>
</html>

Explanation:

  • .filter(".active") → Highlights only active items.

  • .not(".active") → Styles items that are not active.

  • .eq(2) → Targets the 3rd item.

  • .first() / .last() → Styles first and last items.

  • .has("li.active") → Selects <ul> containing active <li>.

9. Summary of jQuery Filtering Methods

Method Purpose
.filter() Keep only elements matching selector/function
.not() Remove elements matching selector/function
.eq(index) Select element at specific index
.first() Select first element
.last() Select last element
.has() Select elements containing specific descendants
.is() Check if element matches selector (true/false)