Jquery Traversing

There are several jQuery methods that you can use for traversing the DOM tree, including:

.parent() – Selects the parent element of the selected element.
.children() – Selects all the child elements of the selected element.
.siblings() – Selects all the sibling elements of the selected element.
.find() – Selects all descendant elements of the selected element that match a specified selector.
.next() – Selects the next sibling element of the selected element.
.prev() – Selects the previous sibling element of the selected element.

Here’s an example of how you can use these methods:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Traversing Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 5px;
            border: 1px solid black;
        }
        .active {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h2>jQuery Traversing Example</h2>
    <ul>
        <li>Item 1</li>
        <li class="active">Item 2
            <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
            </ul>
        </li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <script>
        $(document).ready(function() {
            // Select the parent of the active list item
            $(".active").parent().css("background-color", "gray");

            // Select all the child elements of the active list item
            $(".active").children().addClass("active");

            // Select all the sibling elements of the active list item
            $(".active").siblings().css("border-color", "red");

            // Select all the descendant elements of the list that have the class "active"
            $("ul").find(".active").css("font-weight", "bold");

            // Select the next sibling element of the active list item
            $(".active").next().addClass("active");

            // Select the previous sibling element of the active list item
            $(".active").prev().addClass("active");
        });
    </script>
</body>
</html>