The jQuery find() method can be used to get all the matching descendant elements for the selected element. When you use this method, it traverses through all its children and grandchildren to get the required element.
Syntax
The syntax of this method is given below:-
Description of the Parameters
The description of these parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the element to select and find all its descendant elements. You can use the element tag name, class name, or id to select. It is a required field. |
| filterElement | It is the element or jQuery object to specify and get the descendant element. It is a required field. |
jQuery find() Method to Find Descendant an Element
If you want to get the specified descendant elements for the selected element, you have to use the method as given below. The below example contains the list of items and the span element. It finds all the span elements for the selected element.
You can also use the class name or id to select the required element.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $("ul").find("span").css("color","orange"); }); }); </script> <ul> <li><span>First</span> li element</li> <li>Second li element.</li> <li><span>Last</span> li element.</li> </ul> <button type="button" class="mybtn">Click to Find</button> |
Output
- First li element
- Second li element.
- Last li element.
When you click the button given above, it selects the descendant span element. After selecting the element, it applies the orange color.
Return All Descendant Elements
If you want to find all the descendant elements of the selected element, you have to use “*” as the parameter of the jQuery find() method. It selects every element that comes as the children and grandchildren of the selected element.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $('.myallbtn').click(function(){ $("ul").find("*").css({"color":"orange","border":"1px solid red","padding":"5px","margin":"10px"}); }); }); </script> <ul> <li><span>First</span> li element</li> <li>Second li element.</li> <li><span>Last</span> li element.</li> </ul> <button type="button" class="myallbtn">Click to Find All</button> |
Output
- First li element
- Second li element.
- Last li element.
Click the button given above to find all the elements in the selected element. You can check all the elements highlighted with the border color.
How to Get Multiple Descendant Elements Using jQuery find() Method
You can also get multiple specified descendant elements for the selected element. Pass the multiple comma-separated tag name, class name, or id of the elements to get. The below example selects three descendant elements that are the children of the selected element.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $('.mymultibtn').click(function(){ $("ul").find("em,span,b").css("color","red"); }); }); </script> <ul> <li><em>Welcome to TutorialDeep!</em></li> <li><b>Learn jQuery</b> with live examples.</li> <li>Use examples on your project</li> <li>This is the <span>Last</span> li element.</li> </ul> <button type="button" class="mymultibtn">Click to Find</button> |
Output
- Welcome to TutorialDeep!
- Learn jQuery with live examples.
- Use examples on your project
- This is the Last li element.
When you click the button given above, it select italic, bold, and span element for the selected element.
You may also like to read
I hope you like this tutorial on jQuery find() method. If you have any queries regarding the tutorial, please comment below.
References