jQuery parent(), children() and siblings()

By: Rajesh P.S.

Within an HTML document, every element is represented as a Node object, forming a structured hierarchy known as the Document Object Model (DOM). The DOM serves as the foundation for interacting with webpages and their associated resources. It orchestrates the arrangement of various nodes, establishing essential parent-child and sibling relationships, which collectively define the structure and content of the web page.

DOM traversal is a notable feature of jQuery, enabling effortless navigation throughout the DOM tree. These traversal methods empower developers to navigate upwards, downwards, and across the DOM structure with ease. Traversal can be categorized into three fundamental aspects: parents, children, and siblings. To utilize the full potential of these methods, a comprehensive comprehension of the relationships between elements within the DOM tree is essential. jQuery offers a wealth of user-friendly methods to facilitate efficient traversal and manipulation within each of these aspects.

jQuery parent()

The jQuery parent() method is an integral function that retrieves the immediate parent element of the selected element. This built-in jQuery method is employed to identify the parent element associated with the selected element. It facilitates navigation up a single level within the DOM hierarchy and provides the corresponding parent element. When invoked on a collection of elements, parent() furnishes a set of their individual unique immediate parent elements.

Continue Reading...

Syntax

$(selector).parents([filter])

The parent() method in jQuery is designed to navigate precisely one level upwards within the HTML DOM tree. It allows for optional parameters that can be employed to further refine and filter the traversal process, providing developers with additional control and flexibility when selecting parent elements.

example

$("p").parent().css({"color": "blue"});

<ul> <li>Red</li> <li><div><p>Blue</p></div></li> <li>Green</li> </ul>

Browser View

Red
Blue
Green

Full Source

<html> <head> <title>jQuery parent() example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").parent().css({"color": "blue"}); }); </script> </head> <body> <ul> <li>Red</li> <li><div><p>Blue</p></div></li> <li>Green</li> </ul> </body> </html>

jQuery children()

The children() method in jQuery retrieves all immediate children of each element within the selected set of elements. This function enables the examination of the children within the DOM tree, facilitating the creation of a new jQuery object comprising the identified elements. Additionally, the children() method is valuable for executing various actions on the child elements, such as modifying background colors, enabling or disabling, hiding, showing, and more, providing a versatile toolset for manipulating the selected elements' descendants.

Syntax

selector.children( [selector] )

example

$("div").children().css({"color": "blue"});

<ul> <li>Red</li> <li><div><p>Blue</p></div></li> <li>Green</li> </ul>

Browser View

Red
Blue
Green

Full Source

<html> <head> <title>jQuery children() example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").children().css({"color": "blue"}); }); </script> </head> <body> <ul> <li>Red</li> <li><div><p>Blue</p></div></li> <li>Green</li> </ul> </body> </html>

jQuery siblings()

The siblings() method in jQuery retrieves a collection of elements that encompasses all the distinct siblings of each element within the matched set of elements. Notably, unlike jQuery's next() and prev() methods, the siblings() method traverses both forward and backward along the siblings of the selected element, providing a comprehensive selection of all siblings in both directions. This versatile method offers a convenient way to access and manipulate elements adjacent to the selected elements in the DOM hierarchy.

Syntax

$(selector).siblings([filter])

You can optionally include one or more selector as a parameter within the siblings() method to filter your search for the siblings.

example

$("li.child").siblings().css({"color": "red"});

<ul> <li>Red</li> <li class="child">Blue</li> <li>Green</li> </ul>

Browser View

Red
Blue
Green

Full Source

<html> <head> <title>jQuery siblings() example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("li.child").siblings().css({"color": "red"}); }); </script> </head> <body> <ul> <li>Red</li> <li class="child">Blue</li> <li>Green</li> </ul> </body> </html>

Conclusion

The jQuery parent() method retrieves the immediate parent element of the selected element, while children() returns all direct children of each matched element. On the other hand, the siblings() method retrieves a set of elements comprising all unique siblings of each element within the matched set, allowing for traversal both forward and backward along the siblings of the selected element. These jQuery methods provide powerful tools for navigating and interacting with elements in the DOM hierarchy.

Next > Difference between parent() and parents() in jQuery?

Related Topics

More Related Topics.....