jQuery traversal - descendants

May 07, 2021 jQuery

Future generations are children, grandchildren, great-grandchildren, and so on.

With jQuery, you can traverse the DOM tree down to find descendants of elements.

Traverse the DOM tree down

Here are two jQuery methods for traversing the DOM tree down:

The children() method returns all direct child elements of the selected element.

This method only traverses the DOM tree at the next level.

The following example returns all the direct child elements of each of the elements:

$(document).ready(function(){
$("div").children();
});

You can also use optional parameters to filter searches for child elements.

The following example returns all the elements of the class named "1", and they are direct child elements of the class:

$(document).ready(function(){
$("div").children("p.1");
});

Tip: In this site's jQuery programming practice, you can practice: jQuery uses children() to manipulate child elements!

The find() method returns the descendant element of the selected element all the way down to the last descendant.

The following example returns all the elements that belong to the descendants of the slt;div>

$(document).ready(function(){
$("div").find("span");
});

The following example returns all descendants of the .

$(document).ready(function(){
$("div").find("*");
});