Tutorial

❮ Previous Next ❯

Descendants of jQuery Traversing

You can use jQuery to identify decedents of an element by traversing down the DOM tree.

A descendant is a person who is a kid, grandkid, great-grandchild, and etc.

Descending the DOM Tree

There are two basic jQuery techniques for traversing the DOM tree:

children()

find()

The children() function takes all of the selected element's direct children.

This method only goes down one level of the DOM tree.

The example below comes back all components that are immediate children of each <div> element:

Illustration:


                                $(document).ready(function(){<br />
  $("div").children();<br />
});

The illustration returns all <div> descendants:

Illustration:


                                $(document).ready(function(){<br />
  $("div").children("p.first");<br />
});

The descendant components of the target element are returned by the find() method, all the way back down until the last descendant.

The instance below returns all <span> components that are decedents of <div>:

Illustration:


                                $(document).ready(function(){<br />
  $("div").find("span");<br />
});

The illustration returns all <div> descendants:

Illustration:


                                $(document).ready(function(){<br />
  $("div").find("*");<br />
});

❮ Previous Next ❯