jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Traversing Descendants

With jQuery we can easily traverse down the DOM tree to find descendants of an element.

A descendant is a child, grandchild, great-grandchild, and so on.

In this chapter we will explain how to traverse down the DOM tree.

Traversing Down the DOM Tree

We have the following jQuery methods that are used for traverse down the DOM tree:

The following section will show you how to use each method.

jQuery children() Method

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

This method only traverses a single level down the DOM tree.

The following example returns elements that are direct children of DIV:

Run code

You can also use an optional parameter to filter the search for children.

The following example returns all <p> elements that are direct children of DIV:

Run code

jQuery find() Method

The jQuery find() method returns all descendant elements that match the specified argument.

This method traverse downwards along descendants of DOM elements, all the way down to the last descendant.

Starts with all paragraphs and searches for descendant span elements, same as $("p span"):

Run code

To return multiple descendants, separate the selector names with a comma.

The following example returns all <span> and <i> elements that are descendant of <p> elements:

Run code

jQuery Traversing Reference

For a complete Traversing methods reference, visit our jQuery Traversing Reference.