jQuery find() Method
Example
Return all <span> elements that are descendants of <ul>:
$(document).ready(function(){
$("ul").find("span").css({"color": "red", "border": "2px solid red"});
});
Result:
body (great-grandparent)
div (grandparent)
ul (parent)
- li (child)
span (grandchild)
Try it Yourself »
Definition and Usage
The find() method returns descendant elements of the selected element.
A descendant is a child, grandchild, great-grandchild, and so on.
The DOM tree: This method traverse downwards along descendants of DOM elements, all the way down to the last descendant. To only traverse a single level down the DOM tree (to return direct children), use the children() method.
Note: The filter parameter is required for the find() method, unlike the rest of the tree traversal methods.
Tip: To return all of the descendant elements, use the "*" selector.
Syntax
$(selector).find(filter)
| Parameter | Description |
|---|---|
| filter | Required. A selector expression, element or jQuery object to filter the search for descendants Note: To return multiple descendants, separate each expression with a comma. |
Try it Yourself - Examples
Return
all descendant elements of <html>
Using the "*" selector to return all elements that are descendants of <html>.
Return
all <span> elements that are descendants of <ul>
How to return all <span> elements that are descendants of an <ul> element.
Only select descendants with a given class name
How to return
descendant elements with class name "first".
Return
multiple descendants
How to
return multiple descendant elements.
Filter
the descendant search with a jQuery collection of all <ul> elements
How to
return all <span> elements that are descendants of an <ul> element with a jQuery
object.
Show
the descendants of an element by tag names
A demonstration which shows who the descendants of a <div> element
actually are.