Latest web development tutorials

jQuery traversal - offspring

Descendant is a child, grandson, great-grandchildren, and so on.

By jQuery, you traverse down the DOM tree to find the descendant elements.

Traversing the DOM tree down

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

  • children ()
  • find ()

jQuery children () method

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

This method only down one pair DOM tree traversal.

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

Examples

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

try it"

You can also use the optional parameter to filter the search for the sub-elements.

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

Examples

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

try it"

jQuery find () method

find () method returns the selected element descendant elements, all the way down to the last descendant.

The following example returns belong <div> all <span> element descendants:

Examples

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

try it"

The following example returns <div> all generations:

Examples

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

try it"