jQuery Traversing - Descendants
You may use jQuery to locate descendants of an element by traversing down the DOM tree.
A descendant is defined as a child, grandchild, great-grandchild, and so on.
Traversing Down the DOM Tree
Two helpful ways to traversing the DOM tree are jQuery:
children()find()
Related Links
jQuery children() Method
All immediate children of the chosen element are returning with the children() approach.
Only single level of the DOM tree is traversed by this technique.
Example:- The example below retrieves all elements which are direct children of
each div element with class="div1".
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
$(".div1").children().css({ "color": "red", "border": "2px solid blue" });
});
});
</script>
</head>
<body>
<div class="div1">div (current element)<br /> <br />
<p>p (child 1)
<span>span (grandchild 1)</span>
</p>
<p>p (child 2)
<span>span (grandchild 2)</span>
</p>
<div>div (child 3)</div>
</div><br />
<button id="b1">Show Child of DIV 1</button>
</body>
</html> Output :-
p (child 1) span (grandchild 1)
p (child 2) span (grandchild 2)
Related Links
jQuery find() Method
The find() method is used to find any child or descendant element anywhere from the choosen element.
The descendant elements of the chosen element are returned by the find() function, all the way down to the final descendant.
Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b3").click(function () {
$(".div3").find("span").css({ "color": "red", "border": "2px solid blue" });
});
});
</script>
</head>
<body>
<div class="div3">div (current element)<br /> <br />
<p>p (child 1)
<span>span (grandchild 1)</span>
</p>
<p>p (child 2)
<span>span (grandchild 2)</span>
</p>
<div>div (child 3)</div>
</div><br />
<button id="b3">Find ALL Child SPAN Element </button>
</body>
</html> Output :-
p (child 1) span (grandchild 1)
p (child 2) span (grandchild 2)