Find (selector)
This method is used to filter by selector expressions in the descendant elements of a matching element.
Remember: Using this method you must pass in the selector expression parameter, or you cannot get any elements, and you lose the meaning of using this method.
I've only recently figured out how to use the jquery method to find all the descendant elements in an element. Use this. Find () method to do it easily.
See examples:
| The code is as follows |
Copy Code |
| <div id= "Level_one" >
I am the outer layer of Div plain text content
<div>
I am the plain text content of the second level div
<span>jquery Basic Tutorials </span>
<span class= "Item" >jquery tutorial </span>
</div>
<div>
I am also the plain text content of the second level div
<span class= "Item" >php Learning </span>
<span>php Tutorials </span>
</div>
</div> $ ("#level_one"). Find ("*"). length;//this is the number of all the elements in the DIV with the id "Level_one", and the result is 6.
$ ("#level_one"). Find ("div"). length;//gets 2 elements
$ ("#level_one"). Find ("span"). length;//gets 4 elements
$ ("#level_one"). Find ("Span.item"). length;//gets 2 elements |
Example 1
| code is as follows |
copy code |
| <style>
#level_one {width:240px;height:360px;border:2px solid #0000FF;p Adding:10px;float:left}
# Level_one div{width:200px;height:150px;border:1px solid #FF0000; margin:10px;}
#level_one Div span{float:left;width:150px;height:30px;border:1px solid #999000; margin:10px;}
</style>
<div id= "Level_one"
I am the outer layer of Div plain text content
<div>
I am the plain text content of the second layer div
<span>jquery Basic tutorial </span>
<span>jquery Tutorial </span
</div>
<div>
I am also plain text content for second-tier Div
<span> PHP Learning </span>
<span>php tutorial </span>
</div>
</div>
< Input type= "button" id= "Test1" value= "get all descendant elements of Div#level_one" "
<input type=" button "id=" Test2 "value=" get div #level_one的中的span ""
<input type= "button" id= "Test3" value= "get the div in Div#level_one" " <script>
$ (function () {
$ ("#test1"). Click (function () {
Alert ($ ("#level_one"). Find ("*"). length);
});
$ ("#test2"). Click (function () {
Alert ($ ("#level_one"). Find ("span"). length);
});
$ ("#test3"). Click (function () {
Alert ($ ("#level_one"). Find ("div"). length);
});
})
</script> |
In fact, the above jquery code and the following jquery code effect is the same.
| The code is as follows |
Copy Code |
$ ("#level_one *"). length;//will get 6 elements
$ ("#level_one div"). length;//gets 2 elements
$ ("#level_one span"). length;//gets 4 elements
$ ("#level_one Span.item"). length;//gets 2 elements
|
Exp1
| The code is as follows |
Copy Code |
| <style>
#level_one {width:240px;height:360px;border:2px solid #0000FF;p Adding:10px;float:left}
#level_one div{width:200px;height:150px;border:1px solid #FF0000; margin:10px;}
#level_one Div span{float:left;width:150px;height:30px;border:1px solid #999000; margin:10px;}
</style>
<div id= "Level_one" >
I am the outer layer of Div plain text content
<div>
I am the plain text content of the second level div
<span>jquery Basic Tutorials </span>
<span class= "Item" >jquery tutorial </span>
</div>
<div>
I am also the plain text content of the second level div
<span class= "Item" >php Learning </span>
<span>php Tutorials </span>
</div>
</div>
<font color= "#FF0000" > click the button below to filter the elements in a div with ID level_one </font><br>
<input type= "button" id= "Test1" value= "get the number of all descendant elements" ><br>
<input type= "button" id= "Test2" value= "get the number of spans" ><br>
<input type= "button" id= "Test3" value= "get the number of div" ><br>
<input type= "button" id= "test4" value= "gets the number of spans in class for item" ><br>
<script>
$ (function () {
$ ("#test1"). Click (function () {
Alert ($ ("#level_one *"). length);
});
$ ("#test2"). Click (function () {
Alert ($ ("#level_one span"). length);
});
$ ("#test3"). Click (function () {
Alert ($ ("#level_one div"). length);
});
$ ("#test4"). Click (function () {
Alert ($ ("#level_one span.item"). length);
});
})
</script> |
