Wapka Official Forum

jQuery Traversing - Descendants


With jQuery you can traverse down the DOM tree to
find descendants of an element.
A descendant is a child, grandchild, great-grandchild, and so
on.

Traversing Down the DOM Tree
Two useful jQuery methods for traversing down the DOM tree are:

children()
find()


jQuery children() Method
The 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 all elements that are direct children of each <div> elements:

Example

$(document).ready(function(){  $("div").children();});
Try it Yourself »

You can also use an optional parameter to filter the search for children.
The following example returns all <p> elements with the class name "first", that
are direct children of <div>:

Example

$(document).ready(function(){  $("div").children("p.first");});
Try it Yourself »








jQuery find() Method
The find() method returns descendant elements of the selected element, all
the way 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 Exercises

Test Yourself With Exercises

Exercise:
Use a jQuery method to get all direct children of a <div> element element.


$("div").();



Submit Answer »
Start the Exercise



jQuery Traversing Reference
For a complete overview of all jQuery Traversing methods, please go to our
jQuery Traversing Reference.












★
+1

Reference: https://www.w3schools.com/jquery/jquery ... ndants.asp