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

In an HTML document, everything is represented as a Node object . Interacting with a webpage and its resources is done using a DOM tree . The different nodes are organized in the DOM tree with parent/children/sibling relationships. DOM traversing is one of the prominent features of the jQuery . With these traversal methods, we can go up, down, and all around the DOM tree very easily. Traversing can be broken down into three basic parts: parents, children, and siblings . To make the most it you need to understand the relationships between the elements in a DOM tree. jQuery has an abundance of easy-to-use methods for all these parts.

jQuery parent()

The jQuery parent() returns the direct parent element of the selected element. It is an inbuilt method in jQuery which is used to find the parent element related to the selected element. This method traverse a single level up the selected element and return that element. If called on a set of elements, parent returns a set of their unique direct parent elements. Syntax

$(selector).parents([filter])

The parent() method traverses only one level up the HTML DOM tree . The optional parameters provide additional filtering options to narrow down the traversal. 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()

jQuery children() method returns all direct children of each element in the set of matched elements. This method allows us to search through the children of these elements in the DOM tree and construct a new jQuery object from the matching elements. Also, this methos help to perform desired actions on the child elements like changing the background color, enable, disable, hide, show etc by using this method. 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 returns a set of elements containing all of the unique siblings of each of the matched set of elements. Unlike jQuery next() and prev() methods, this method traverses both forward and backwards along the siblings of the selected element. 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>

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

Related Topics