jQuery Traversal - Descendants

Descendants are children, grandchildren, great-grandchildren, and so on.

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

Descending Traversal of the DOM Tree

Below are two jQuery methods used for descending traversal of the DOM tree:

  • children()
  • find()

jQuery children() Method

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

This method will only traverse the DOM tree one level down.

The following example returns all direct children of each <div> element:

Example

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

Try It Yourself

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

The following example returns all <p> elements with the class name "1", and they are direct children of <div>:

Example

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

Try It Yourself

jQuery find() Method

The find() method returns the descendant elements of the selected elements, going down to the last descendant.

The following example returns all <span> elements that are descendants of <div>:

Example

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

Try It Yourself

The following example returns all descendants of <div>:

Example

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

Try It Yourself

jQuery Traversal Reference Manual

To learn about all jQuery traversal methods, please visit our jQuery Traversal Reference Manual.