Mastering DOM Traversal with jQuery: Traversing Methods

children() Method

Selects all direct child elements of selected elements.

var children = $("#container").children();
children.addClass("highlight");

parent() Method

Selects the direct parent element of selected elements.

var parent = $("#element").parent();
parent.addClass("highlight");

siblings() Method

Selects all sibling elements of selected elements.

var siblings = $("#element").siblings();
siblings.addClass("highlight");

All in one Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Traversing in jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <script>
        $(document).ready(function(){
            $(".btn1").click(function(){
                $(this).css("background-color","brown");
                $(".box1").children(".para1").css("background-color","yellow");
            });
            $(".btn2").click(function(){
                $(".box2").children(".para1").children().css("background-color","blueviolet");
            });
            $(".btn3").click(function(){
                $(".soluta").parent().css("background-color","yellowgreen");
            });
            $(".btn4").click(function(){
                $(".soluta").parent().parent().css("border","5px solid red");
            });
            $(".btn5").click(function(){
                $(".soluta").siblings().css("background-color","pink");
            });
            $(".btn6").click(function(){
                $(".soluta").parent().parent().siblings(".box1")
                .children().children().css("background-color","blue");
            });
            
        });
    </script>
</head> 
<body>
    <div class="box1">
        <p class="para1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
        Et quas eligendi quisquam, <span>exercitationem harum</span> minus 
        architecto aperiam reiciendis in accusantium maiores fugiat quam at <span>cumque 
        eum soluta delectus</span> aliquid eos!</p>
    </div>
    <div class="box2">
        <p class="para1">Lorem ipsum, dolor sit amet <span>consectetur 
        adipisicing elit.</span> Et quas eligendi quisquam, <span>exercitationem 
        harum</span> minus architecto aperiam reiciendis in accusantium maiores fugiat 
        quam at <span class="soluta">cumque eum soluta delectus</span> aliquid eos!</p>
    </div>
    <button class="btn1">Change1 </button>
    <button class="btn2">Change2 </button>
    <button class="btn3">Change3 </button>
    <button class="btn4">Change4 </button>
    <button class="btn5">Change5 </button>
    <button class="btn6">Change6 </button>
</body>
</html>

Run Code

Previous Next