Tutorial

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

Published on August 4, 2022

Pankaj

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

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 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. 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 our products

About the authors

Pankaj

author

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.