Tutorial

jQuery parent() and children() tree traversal functions example

Published on August 3, 2022
    Default avatar

    By Pankaj

    jQuery parent() and children() tree traversal functions example

    While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

    jQuery provides a lot of tree traversal functions that we can use to get the parent, child, siblings, previous and next elements. We will look into each of jQuery tree traversal methods one by one - today we will look into two of the jQuery traversal methods i.e parent() and children().

    jQuery parent() function

    jQuery parent() method is used to get the direct parent element of the selected HTML element. You can perform desired actions on the parent element once it Is returned. This is the syntax for using jQuery parent():

    • $("child").parent()

    This will return the direct parent of parent element

    • $("child").parent(“filter”)

    The filter is an optional parameter passed to the parent() method.

    jQuery parent() function example

    Following example demonstrates the parent() method usage. jquery-parent.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>jQuery Traversing Parent</title>
    
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
    <script>
    $(document).ready(function(){
      $("h4").parent().css("background-color","yellow");
    });
    </script>
    </head>
    <body>
    
    <span id="spanParent">Span Element - Parent of h4 element
    <h4>This is an h4 element - child of Span.</h4>
    </span>
    
    </body>
    </html>
    

    In this example, the parent element is <span id=“spanParent”> and <h4> is the child element. The parent() method is used to get the direct parent element which is the <span> element and changes the background color. The parent() method traverses only one level up the HTM DOM tree. The optional parameters provide additional filtering options to narrow down the traversal. Below image shows the output produced by above HTML page, notice the background color of span element is yellow. jQuery-parent-example

    jQuery children() function

    jQuery children() method is used to get the direct children of the selected HTML element. You can use children() method to traverse through the child elements of the selected parent element. You can perform desired actions on the child elements like changing the background color, enable, disable, hide, show etc by using this method. This is the syntax for using jQuery children() function:

    • $("parentElement").children()

    This is used without any parameters. This is used return all the direct children of the parentElement.

    • $("parentElement").children("childElement")

    parentElement and childElement could be any HTML element .This will return all the matched childElement of the parentElement. The parameter, childElement in this method is optional, which provides an additional filtering option to get the child elements.

    jQuery children() function example

    Following example demonstrates the children() method usage. jquery-children.html

    <html>
    <head>
    <title>jQuery Traversing Children</title>
    
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
    <script>
    $(document).ready(function(){
      //below code will run for all divs
      $("div").children("p").css("background-color","yellow");
    
       $("#spanParent").children("h4").css("background-color","green");
    });
    </script>
    </head>
    <body>
    
    <div style="border:1px solid;">
    <h3>h3 - Child of div</h3>
    <p> p -Child of div</p>
    <span> Span - Child of Div</span>
    <p>Second p - Child of div</p>
    </div>
    <p> p element - Not a child of div</p>
    
    <span id="spanParent">
    <h4>This is an h4 element (child of Span).</h4>
    </span>
    
    </body>
    </html>
    

    In this example, you can see two parent elements: <div id=“divParent”> and <span id=“spanParent”>. The children() method is used to get the child elements and change the color of the element. We use children method to return the child element <p> of the parent <div> element and change the color of all child <p> elements to yellow. Notice the p element outside the div element is not altered by this method. Likewise, span element has child element h4 and we change the color of that element in this example. The children method traverses only one level down the HTM DOM tree. This method is not used to traverse through the text nodes. Below is the output produced by the above HTML page. jQuery-children-example That’s all for jQuery parent and children function examples, we will look into more jQuery traversal methods in coming posts.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Pankaj

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel