jQuery - jQuery traversing

jQuery traversing refers to the methods used to navigate through the DOM tree—selecting elements relative to other elements. Traversing helps you find parent, child, sibling, or descendant elements easily and perform actions on them.

Here’s a detailed guide to jQuery traversing:

1. Basic Concept

$(selector).traversingMethod();

selector → Starting point element(s)
traversingMethod() → Method to move through the DOM (parent, children, siblings, etc.)

2. Child Traversing

Method	Description	Example
`.children()`	Selects direct children of an element	`$("#list").children()`
`.find(selector)`	Selects descendant elements matching selector	`$("#list").find("li")`

Example:

$("#list").children().css("color","red"); // Direct children
$("#list").find("li").css("background","yellow"); // All <li> inside #list

3. Parent Traversing

Method	Description	Example
`.parent()`	Selects direct parent	`$("#item").parent().css("border","1px solid red");`
`.parents()`	Selects all ancestors	`$("#item").parents("div").css("background","lightblue");`
`.closest(selector)`	Selects first ancestor matching selector	`$("#item").closest("ul").css("border","2px solid green");`

4. Sibling Traversing

Method	Description	Example
`.siblings()`	All siblings of the selected element	`$("#item").siblings().css("color","blue");`
`.next()`	Immediately next sibling	`$("#item").next().css("font-weight","bold");`
`.prev()`	Immediately previous sibling	`$("#item").prev().css("font-style","italic");`
`.nextAll()`	All following siblings	`$("#item").nextAll().css("color","green");`
`.prevAll()`	All preceding siblings	`$("#item").prevAll().css("color","orange");`
`.nextUntil(selector)`	Siblings after current element until selector	`$("#start").nextUntil("#end").css("background","pink");`
`.prevUntil(selector)`	Siblings before current element until selector	`$("#end").prevUntil("#start").css("background","lightgray");`

5. Filtering Traversed Elements

Method	Description	Example
`.first()`	First element of selection	`$("li").first().css("color","red");`
`.last()`	Last element	`$("li").last().css("color","blue");`
`.eq(index)`	Element at specified index	`$("li").eq(2).css("font-weight","bold");`
`.filter(selector)`	Reduce selection to elements matching selector	`$("li").filter(".active").css("background","yellow");`
`.not(selector)`	Exclude elements matching selector	`$("li").not(".active").css("color","gray");`

6. Example: jQuery Traversing

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Traversing Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(function(){
        // Children
        $("#list").children().css("color","red");

        // Parent
        $("#item3").parent().css("border","2px solid green");

        // Siblings
        $("#item2").siblings().css("background","lightgray");

        // Next/Prev
        $("#item1").next().css("font-weight","bold");
        $("#item4").prev().css("font-style","italic");

        // Filtering
        $("#list li").first().css("text-decoration","underline");
        $("#list li").last().css("text-decoration","line-through");
        $("#list li").eq(1).css("color","blue");
    });
    </script>
</head>
<body>
    <ul id="list">
        <li id="item1">Item 1</li>
        <li id="item2" class="active">Item 2</li>
        <li id="item3">Item 3</li>
        <li id="item4">Item 4</li>
    </ul>
</body>
</html>

Explanation:

Traversing methods allow targeting elements relative to others instead of selecting them directly by ID or class.

7. Summary of Traversing Methods

Category	Methods
Children	`.children()`, `.find()`
Parents	`.parent()`, `.parents()`, `.closest()`
Siblings	`.siblings()`, `.next()`, `.prev()`, `.nextAll()`, `.prevAll()`, `.nextUntil()`, `.prevUntil()`
Filtering	`.first()`, `.last()`, `.eq()`, `.filter()`, `.not()`