In web development, it is often required to find or select certain HTML elements in order to manipulate them. For the purpose of doing so you have traverse through the DOM tree and select a particular element. jQuery provides a huge list of methods that are used for traversing through the DOM tree. Here we have enlisted these jQuery methods.

  1. children() method
  2. each() method
  3. find() method
  4. first() method
  5. next() method
  6. parent () method
  7. prev() method
  8. siblings() method

These above-mentioned methods are explained in detail below.

children() Method

For the purpose of fetching all the immediate children of a specified element, the jQuery children() method is used. This method only traverses one level down the DOM tree.

Syntax

$(selector).children(filter)

Filter is an optional parameter that is used to specify an element to restrict the search for children.

Example

Suppose you want to fetch the direct children of a certain element using the jQuery children() method. Here is an example of doing so.

HTML

<body class=“children”>

    <div style=“width:500px;”>div (grandparent)

        <ul>ul (direct parent)

            <li>li (direct child of ul)

                <span>span (grandchild of ul)</span>

            </li>

        </ul>

    </div>

</body>

We have created a

element in which a

    element is nested. Further inside the

      element

    • , and elements are nested.

      CSS

      .children * {

          display: block;

          border: 2px solid gray;

          color: gray;

          padding: 5px;

          margin: 15px;

      }

      The entire body has been given some style by using CSS.

      jQuery

      $(document).ready(function(){

          $(“ul”).children().css({“color”: “blue”, “border”: “2px solid blue”});

      });

      Here the children() method is used to fetch the direct children of

        element. Besides this, css() method is chained to the children() method in order to highlight the children of

          .

          Output

          <img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image4-51.png" data-lazy- height="315" src="data:image/svg xml,” width=”668″>

          The direct child of

            has been fetched successfully.

            each() Method

            In order to specify a function to be executed for each of the specified elements, the each() method is used.

            Syntax

            $(selector).each(function(index,element))

            • The function inside the .each() method is a required parameter function which will be executed for each of the specified elements.
            • Index parameter specifies the position of the selector.
            • Element parameter refers to the current element.

            Example

            Suppose you want to change the text for each of the

            element using the jQuery each() method.

            HTML

            <p>First paragraph.</p>

            <p>Second paragraph.</p>

            <p>Third paragraph.</p>

            <button>Change text of each paragraph</button>

            In the above HTML code, we have created three

            elements and one button.

            jQuery

            $(document).ready(function(){

                var i = 0;

                $(“button”).click(function(){

                    $(“p”).each(function(){

                        $(this).text(`Paragraph ${i =1}`)

                    });

                });

            });

            Here we are using the each() method to change text for each of the

            elements. The “this” parameter refers to the current element, which in this case is the

            element.

            Output

            The text changes everytime you click on the button.

            <img alt="" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image6-4.gif" height="268" src="data:image/svg xml,” width=”311″>

            The each() method is working properly.

            find() Method

            For the purpose of finding all the successors of an element, the find() method is used. All successors of an element include; children, grandchildren, great-grandchildren, and so forth.

            Syntax

            Filter is a required parameter which refers to either a selector, element, or jQuery object whose children are to be found.

            Example

            Suppose you want to fetch the child, grandchild and great-grandchild of an element. Here is how you do it.

            HTML

            <body class=“main”>

                <div style=“width:500px;”>div (grandparent)

                    <ul>ul (direct parent)

                        <li>li (child)

                            <span>span (grandchild)

                                <span>span (great-grandchild)</span>

                            </span>

                        </li>

                    </ul>

                </div>

            </body>

            In the above code, a

            element is created and inside that

            we have nested a

              element. Furthermore, we have nested

            • and elements inside the
                element. The element further nests a element. Multiple nesting was done in order to make the working of the find() method clear.

                CSS

                .main * {

                    display: block;

                    border: 2px solid gray;

                    color: gray;

                    padding: 5px;

                    margin: 15px;

                }

                We styled the class “main” using CSS. This class is assigned to body.

                jQuery

                $(document).ready(function(){

                    $(“ul”).find(“li,span”).css({“color”: “blue”, “border”: “2px solid blue”});

                });

                Here we are using the find() method to find

              • and elements in the
                  element and later applying some css styling to highlight the fetched successors.

                  Output

                  <img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image5-37.png" data-lazy- height="380" src="data:image/svg xml,” width=”666″>

                  The successors of the

                    element were found.

                    first() Method

                    The first() method fetches the first nested element inside a specified element.

                    Syntax

                    Example

                    Suppose you want to fetch the first element that is inside an

                    element. Follow the code below.

                    HTML

                    In the above HTML code, we have created an

                    element and nested two elements within that

                    element.

                    jQuery

                    $(document).ready(function(){

                        $(“h1 span”).first().css(“background-color”, “pink”);

                    });

                    Here we have used the first() method to find the first element of the

                    element, moreover, used css() method to highlight the fetched element.

                    Output

                    <img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image8-26.png" data-lazy- height="104" src="data:image/svg xml,” width=”856″>

                    The first element of the

                    element is highlighted in pink.

                    next() Method

                    In order to find the adjacent sibling of a specified element, the next() method is used.

                    Syntax

                    Filter is an optional parameter that is used to specify an element to restrict the search for the adjacent sibling.

                    Example

                    Here we have illustrated the working of the jQuery next() method.

                    HTML

                    <h1>This a heading</h1>

                    <p>This is the first paragraph.</p>

                    <p>This is the second paragraph.</p>

                    Here we have created one

                    element and two

                    elements.

                    jQuery

                    $(document).ready(function(){

                        $(“h1”).next().css(“background-color”, “pink”);

                    })

                    In the above code, we are using the next() method to find the adjacent sibling of the

                    element.

                    Output

                    <img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image7-34.png" data-lazy- height="178" src="data:image/svg xml,” width=”621″>

                    The adjacent sibling of the

                    element was fetched successfully.

                    parent () Method

                    For the purpose of finding the direct parent of an element, the parent() method is used. It is a built-in jQuery function that only goes one level up the specified element and fetches the immediate parent of that element.

                    Syntax

                    $(selector).parent(filter)

                    Filter is an optional parameter which is used to restrict the search for parent element by specifying a selector expression.

                    Example

                    Suppose you want to fetch the direct parent of a element  which is present in an

                  • element which further is a part of a
                    element.

                    HTML

                    <body class=“main”>

                        <div style=“width:500px;”>div (I am a great-grandparent)

                            <ul>ul (I am a grandparent)

                                <li>li (I am a direct parent)

                                    <span>span</span>

                                </li>

                            </ul>

                        </div>

                    </body>

                    There are a total of four elements generated in the above code;

                    ,

                      ,

                    • , and . Observing their hierarchy, the
                    • element is regarded as a direct parent of the element,
                        is the grandparent of the element, and

                        is the great-grandparent because all of the elements are nested inside the

                        element.

                        CSS

                        .main * {

                            display: block;

                            border: 2px solid gray;

                            color: gray;

                            padding: 5px;

                            margin: 15px;

                        }

                        Using CSS, we have given some style to the body.

                        jQuery

                        $(document).ready(function(){

                            $(“span”).parent().css({“color”: “blue”, “border”: “2px solid blue”});

                        });

                        We have applied the parent() method on the element and also chained the css() method to it in order to highlight the direct parent of the element and verify that the parent element is accessed successfully.

                        Output

                        <img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image2-54.png" data-lazy- height="312" src="data:image/svg xml,” width=”672″>

                        The parent element is accessed successfully.

                        prev() Method

                        The jQuery prev() method is used to fetch the previous adjacent sibling of a specified element. This method traverses in a backward manner in the DOM tree.

                        Syntax

                        Filter is an optional parameter that is used to specify an element to restrict the search for the previous adjacent sibling.

                        Example

                        Suppose you want to fetch the previous adjacent sibling of an element. Use the following code.

                        HTML

                        <h1>Heading 1</h1>

                        <h2>Heading 2</h2>

                        <p>Some paragraph.</p>

                        In the above code, we have created three elements which are;

                        ,

                        , and

                        .

                        jQuery

                        $(document).ready(function(){

                            $(“h2”).prev().css(“background-color”, “skyblue”);

                        })

                        We have used the jQuery prev() method to fetch the previous adjacent sibling of

                        element.

                        Output

                        <img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image1-52.png" data-lazy- height="188" src="data:image/svg xml,” width=”621″>

                        The previous adjacent sibling of

                        is

                        .

                        siblings() Method

                        In order to fetch all the siblings of a specified element, the siblings() method is used. This method traverses backwards as well as forward in the DOM tree to fetch all the siblings of an element.

                        Syntax

                        $(selector).siblings(filter)

                        Filter is an optional parameter that is used to specify an element to restrict the search for the siblings.

                        Example

                        This example demonstrates the working of the siblings() method.

                        HTML

                        <div style=“width:500px;” class=“div”>

                            <ul>ul (parent)

                                <li>li (the previous adjacent sibling)</li>

                                <li class=“siblings”>li</li>

                                <li>li (the next sibling)</li>

                                <li>li (the next sibling)</li>

                            </ul>

                        </div>

                        In the above code, we have created a

                        element and nested a

                          element inside that div. Moreover, we have nested some

                        • elements inside the
                            element.

                            CSS

                            .div * {

                                display: block;

                                border: 2px solid gray;

                                color: gray;

                                padding: 5px;

                                margin: 15px;

                            }

                            The

                            element has been given a certain style using CSS.

                            jQuery

                            $(document).ready(function(){

                                $(“li.siblings”).siblings().css({“color”: “blue”, “border”: “2px solid blue”});

                            });

                            Using the jQuery siblings() method we are going to fetch all the siblings of the

                          • element. Moreover, in order to highlight those siblings we have used css() method.

                            Output

                            <img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image3-50.png" data-lazy- height="365" src="data:image/svg xml,” width=”632″>

                            The siblings() method is working properly.

                            Conclusion

                            jQuery provides a huge range of methods that are used for the purpose of traversing DOM elements. These methods are; children() method, each() method, find() method, first() method, next() method, parent() method, prev() method, and siblings() method. All of these methods serve their own purpose which is explained in-depth in this guide along with the help of relevant examples.

About the author

<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/B49B6FDCE1F74B3598C4C9BF564AEBEC-150×150.jpg" height="112" src="data:image/svg xml,” width=”112″>

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.

Show Comments