In logical relationships, in this case, a descendant is a child, grandchild, great-grandchild, and so on.
A method such as children() and find() are provided by jQuery so that you can traverse down the DOM tree either single or multiple levels to find or get the child or other descendants of an element in the hierarchy easily.
The children() method in jQuery is typically used to get the direct children of the selected element.
The example below shows how you will highlight the direct children of the <ul> element which is <li> by adding the class .highlight on document ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting the Direct Child Elements in jQuery</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul").children().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
The find() method can be used to get the descendant elements of the selected element.
More so, the find() and children() methods are similar, however, the find() method search through multiple levels down the DOM tree to the last descendant, while the children() method only searches a single level down the DOM tree. The example below shows how you will add a border around all the <li> elements that are descendants of the <div> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting the Specific Descendant Elements in jQuery</title>
<style>
*{
margin: 10px;
}
.frame{
border: 2px solid green;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").find("li").addClass("frame");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>
But, if you want to get all the descendant elements, the universal selector can be used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selecting All the Descendant Elements in jQuery</title>
<style>
*{
margin: 10px;
}
.frame{
border: 2px solid green;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").find("*").addClass("frame");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>