jQuery parent() and children() tree traversal functions

2 years ago

Sophia Anderson

5 minutes

jQuery offers numerous tree traversal functions that allow us to access the parent, child, siblings, previous, and next elements. We will examine each of these jQuery tree traversal methods individually. Today, our focus will be on two of these methods, specifically parent() and children().

The parent() function in jQuery.

The jQuery parent() function retrieves the immediate ancestor of the specified HTML element. Once obtained, you can carry out desired tasks on this parent element. The following is the syntax to utilize the jQuery parent() method:

$(“child”).parent()

This will provide the immediate ancestor of the parent element.

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

The filter can be passed as an optional parameter to the parent() method.

Here’s an example illustrating the use of the jQuery parent() function:

Here is an instance that illustrates the usage of the parent() method in 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 instance, the

element is a child of the parent element . By using the parent() method, we can obtain the direct parent element, which is the element, and modify its background color. This method only traverses one level up the HTML DOM tree. Optional parameters can be used to further filter the traversal. The accompanying image demonstrates the result of the aforementioned HTML page, highlighting the yellow background color of the span element.

The children() function in jQuery.

The children() method in jQuery allows you to retrieve the immediate child elements of a selected HTML element. It enables traversal through the child elements of the selected parent element. You can modify the child elements by altering their background color, enabling or disabling them, hiding or showing them, and more using this method. The syntax for utilizing the jQuery children() function is as follows.

$(“parentElement”).children()

This is used with no parameters to retrieve all the immediate descendants of the parentElement.

$(“parentElement”).children(“childElement”)

The parentElement and childElement can represent any HTML element. This function retrieves all child elements that match the parentElement. The childElement parameter in this method is not required and can be used as an optional filter to select specific child elements.

One possible paraphrase of the phrase “jQuery children() function example” is:

“An illustration of the usage of the jQuery children() function.”

The usage of the children() method is illustrated in the following example with 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, we have two parent elements:

and . We can use the children() method to obtain the child elements and modify the color of each element. By using the children method, we can retrieve the child element

from the parent

element and change the color of all child

elements to yellow. It’s important to note that the

element outside the