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