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>

- Red
Blue
- Green
<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>

- Red
Blue
- Green
<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>

- Red
- Blue
- Green
<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>
Related Topics
- jQuery Interview Questions (Part-2)
- jQuery Interview Questions (Part-3)
- Is jQuery a programming language?
- Why do we need to go for JQuery?
- How to check jQuery version?
- How to multiple version of jQuery?
- What is jQuery CDN?
- Advantages of minified version of JQuery
- How do I check if the DOM is ready?
- How to Use the jQuery load() Method
- Difference between document.ready() and body onload()?
- Is jQuery is a replacement of JavaScript?
- JQuery or JavaScript which is quicker in execution?
- What is the use of param() method?
- Difference between parent() and parents() in jQuery?
- What does jQuery data() function do?
- How do you check if an element exists or not in jQuery?
- How do I check if an HTML element is empty using jQuery?
- How to run an event handler only once in jQuery?
- How to disable/enable an element with jQuery
- Hide and show image on button click using jQuery
- Difference Between Prop and Attr in jQuery
- How do I check if an element is hidden in jQuery?
- What happen if you return false from a jQuery event handler?
- What is each() function in jQuery? How do you use it?
- Which one is more efficient, document.getElementbyId( "myId") or $("#myId)?
- What is the difference between $.map and $.grep in jQuery
- What is the use of serialize method in jQuery
- What is the use of clone method in jQuery?
- What is event.PreventDefault in jQuery?
- Difference between event.PreventDefault and event.stopPropagation?
- What are deferred and promise object in jQuery?
- What are source maps in jQuery?
- What does the jQuery migrate function do?
- Differences Between jQuery .bind() and .live()?
- How can you delay document.ready until a variable is set?
- How to disable cut,copy and paste in TextBox using jQuery?
- How to prevent Right Click option using jquery?
- How does the jQuery pushStack function work?
- Why use jQuery filter() Methods?
- Difference between find() and closest() in jquery?
- How To Use Ajax In Jquery?
- How to multiple AJAX requests be run simultaneously in jQuery?
- Can we call C# code behind using jQuery?
- How to include jQuery in ASP.Net project?
- Need to add jQuery file in both Master and Content page?
- Uncaught TypeError: $(…).modal is not a function jquery
- How to check whether a checkbox is checked in jQuery?
- Uncaught ReferenceError: $ is not defined
- How to Convert JSON Date to JavaScript/jQuery date