jquery traverse all descendants; In this tutorial, you will learn how to do get or find descendant elements using jquery method traversing methods.
jQuery Traversing Descendant
The jQuery Traversing Descendants means a child, grandchild, great-grandchild, and so on.
jQuery offers useful ways to use children () and find (), which you can use to easily find in dom trees at single or multiple levels or to obtain children or other ancestry of an element in the hierarchy.
jQuery children() Method
The jQuery children() method is used to get or find the direct children of the selected element.
Syntax children() Method
$("selector").children()
jQuery children() method By Example
This example will demostrate you how use children() method to selected html elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery children() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.g_cls{
background: green;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".childM").children().addClass("g_cls");
});
</script>
</head>
<body>
<div class="container">
<h3>Hello World</h3>
<p>This is paragraph</p>
<p>This is another paragraph.</p>
<ul class="childM">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
</body>
</html>
Output
Hello World
This is paragraph
This is another paragraph.
- First
- Second
- Third
jQuery find() Method
Using the jQuery find() method to obtain descendant elements of the selected element.
Syntax find() Method
$("selector").find()
jQuery find() method By Example
This example will demostrate you how use find method to selected html elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery find() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.g_cls{
background: #28BAA2;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".container-find").find("li").addClass("g_cls");
});
</script>
</head>
<body>
<div class="container-find">
<h3>Hello World</h3>
<p>This is paragraph</p>
<p>This is another paragraph.</p>
<ul class="childM">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
</body>
</html>
Output
Hello World
This is paragraph
This is another paragraph.
- First
- Second
- Third
