jQuery find()Method
jQuery Traversal MethodsExamples
Return all <span> elements that are descendants of <ul>:
$("ul").find("span").css({"color":"red","border":"2px solid red"});
});
Result:
- ul (parent)
- li (child) span (grandchild)
Try it Yourself »
Definition and Usage
The find() method returns descendant elements of the selected elements.
A descendant is a child, grandchild, great-grandchild, and so on.
DOM tree:This method traverses downwards along the descendants of DOM elements, all the way to the last descendant (<html>). If you only need to traverse down a single level in the DOM tree (returning direct child elements), use the children()method.
Note:filterThe parameter is required in the find() method, unlike other tree traversal methods.
Tip:To return all descendant elements, use the "*" selector.
Syntax
| Parameter | Description |
|---|---|
| filter | Required. A selector expression, element, or jQuery object that filters the search for descendants. Note:To return multiple descendants, use a comma to separate each expression. |
More Examples
Return all descendant elements of <html>
Use the "*" selector to return all descendant elements of <html>.
Return all <span> elements in the descendants of <ul>
How to return all <span> elements that are descendants of <ul>.
Select only descendants with a given class name
How to return descendant elements with the class name "1".
Return multiple descendants
How to return multiple descendant elements.
Filter the descendant search through a jQuery collection of all <ul> elements
How to return all <span> elements in the descendants of <ul> elements via a jQuery object.
Demonstrate the descendants of an element by tag name
Demonstrate the descendants of a <div> element.
Other Extensions