jQuery provides methods to traverse downwards inside the DOM tree to find descendant(s) of a given element. These methods can be used to find a child, grandchild, great-grandchild, and so on for a given element inside the DOM.
There are following three methods to traverse downwards inside the DOM tree:
- children() – returns all the direct children of the matched element.
- find() – returns all the descendant elements of the matched element.
The children() method differs from find() in that children() only travels a single level down the DOM tree where as find() method can traverse down multiple levels to select descendant elements (children, grandchildren, great-grandchildren etc.) as well.
jQuery children() Method
The jQuery children() method returns all the direct children of the matched element. Following is a simple syntax of the method:
$(selector).children([filter])
We can optionally provide a filter selector in the method. If the filter is supplied, the elements will be filtered by testing whether they match it.
Synopsis
Consider the following HTML content:
<div class="great-grand-parent"><div class="grand-parent"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div><div class="grand-parent"><ul class="parent"><li class="child-three">Child Three</li><li class="child-four">Child Four</li></ul></div></div>
Now if we use the children() method as follows:
$(".great-grand-parent").children().css("border","2px solid red");
It will produce following result:
<div class="great-grand-parent"><div class="grand-parent" style="border:2px solid red"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div><div class="grand-parent" style="border:2px solid red"><ul class="parent"><li class="child-three">Child Three</li><li class="child-four">Child Four</li></ul></div></div>
Example
Let’s try the following example and verify the result:
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("button").click(function(){$(".great-grand-parent").children().css("border","2px solid red");});});</script><style>.great-grand-parent *{display:block; border:2px solid #aaa; color:#aaa; padding:5px; margin:5px;}</style></head><body><div class="great-grand-parent"><div class="grand-parent" style="width:500px;"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div><div class="grand-parent" style="width:500px;"><ul class="parent"><li class="child-three">Child Three</li><li class="child-four">Child Four</li></ul></div></div><br><button>Mark Children</button></body></html>
jQuery find() Method
The jQuery find() method returns all descendants of the matched element. Following is a simple syntax of the method:
$(selector).find([ilter)
Here filter selector is mandatory for this method. To return all the descendants of the matched element, we need to pass * as a filter otherwise if the filter is supplied as an element, the elements will be filtered by testing whether they match it.
Synopsis
Consider the following HTML content:
<div class="great-grand-parent"><div class="grand-parent"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div><div class="grand-parent"><ul class="parent"><li class="child-three">Child Three</li><li class="child-four">Child Four</li></ul></div></div>
Now if we use the find(“li”) method as follows:
$(".grand-parent").find("li").css("border","2px solid red");
It will produce following result:
<div class="great-grand-parent"><div class="grand-parent"><ul class="parent"><li class="child-one" style="border:2px solid red">Child One</li><li class="child-two" style="border:2px solid red">Child Two</li></ul></div><div class="grand-parent" style="border:2px solid red"><ul class="parent"><li class="child-three" style="border:2px solid red">Child Three</li><li class="child-four" style="border:2px solid red">Child Four</li></ul></div></div>
Example
Let’s try the following example and verify the result:
<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("button").click(function(){$(".grand-parent").find("li").css("border","2px solid red");});});</script><style>.great-grand-parent *{display:block; border:2px solid #aaa; color:#aaa; padding:5px; margin:5px;}</style></head><body><div class="great-grand-parent"><div class="grand-parent" style="width:500px;"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div><div class="grand-parent" style="width:500px;"><ul class="parent"><li class="child-three">Child Three</li><li class="child-four">Child Four</li></ul></div></div><br><button>Mark Children</button></body></html>
jQuery Traversing Reference
You can get a complete reference of all the jQuery Methods to traverse the DOM at the following page: jQuery Traversing Reference.
Leave a Reply