jQuery Descendants
A descendant is any element that lives inside another element, no matter how deep. Your <div> might hold a <ul>, and that <ul> holds <li> items, and each <li> holds a <span>. All of those are descendants of the <div>. jQuery gives you two tools for walking downward through the DOM tree: children() looks one level down, while find() searches every level below. Learning when to reach for each one is the key to this lesson.
Traversing Down the DOM Tree
When you select an element with jQuery, you often want to grab something inside it rather than the element itself. Maybe you have a card and you want the button inside it, or a list and you want every list item. jQuery ships with two descendant methods that do exactly this. Both start from your selected element and move downward, but they cover different amounts of ground.
- children() - returns the direct children only, meaning elements exactly one level down.
- find() - returns descendants at any depth: children, grandchildren, and beyond.
- Both methods accept an optional selector so you can narrow the results to just the elements you care about.
The children() Method
children() travels down exactly one level. If you select a <ul> and call children(), you get its <li> elements, but not the <span> or <a> tags nested inside those list items. You can pass a selector to filter the direct children even further.
Selecting direct children
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="card">
<h3>Card Title</h3>
<p>First paragraph inside the card.</p>
<p>Second paragraph inside the card.</p>
</div>
<script>
$(document).ready(function() {
// All direct children of <div class="card">
$(".card").children().css("border", "1px solid #ccc");
// Only direct children that are paragraphs
$(".card").children("p").css("color", "teal");
});
</script>
</body>
</html>The find() Method
find() digs all the way down. It looks through every descendant of your selected element and returns the ones that match the selector you pass. Unlike children(), a selector is expected here, because find() without a target would have to return every descendant, which is rarely what you want. A common trick is to pass "*" to grab all descendants at any depth.
Searching all descendants
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="card">
<h3>Card Title</h3>
<p>A paragraph with a <span>nested span</span> buried inside.</p>
</div>
<script>
$(document).ready(function() {
// Every <span> anywhere inside <div class="card">
$(".card").find("span").css("font-weight", "bold");
// Every descendant of any kind
$(".card").find("*").css("opacity", "0.9");
});
</script>
</body>
</html>Exercise: jQuery Descendants
What does the jQuery selector $("div span") match?
