JQuery traverses descendants

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

With JQuery, you can traverse the DOM tree down to find the descendants of an element.

Walk down the DOM tree

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

• Children ()
• Find ()

JQuery Children () method

The Children () method returns all the immediate child elements of the selected element.

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

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

Instance $ (document). Ready (function () {
$ ("div"). Children ();
});
Try it»

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

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

Instance $ (document). Ready (function () {
$ ("div"). Children ("p.1");
});
Try it»

JQuery Find () method

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

The following example returns all <span> elements that belong to <div> descendants:

Instance $ (document). Ready (function () {
$ ("div"). Find ("span");
});
Try it»

The following example returns all descendants of <div>:

Instance $ (document). Ready (function () {
$ ("div"). Find ("*");
});
Try it»

JQuery traverses descendants