The .find() method searches for descendent (child, grandchild, great-grandchild …any levels deep) elements that match the specified selector. Using the .find() method without any parameters just returns an empty jQuery object.
Other useful jQuery articles:
Syntax:
Here is the simple syntax of the method:
.find(selector)
Retrieve the descendants of each element within the matched set that matches the specified selector. A string containing a CSS or custom jQuery selector to match elements against.
Example:
Following is a simple example for the understanding of this method:
<html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <style type="text/css"> div{ padding:10px; border:1px solid; } </style> </head> <body> <h1>Learning jQuery Find() Method</h1> <div class="One"> <div class="test">One-1</div> <div class="test">One-2</div> <div class="Two"> <div class="test">Two-1</div> <div class="test">Two-2</div> <div class="Three"> <div class="test">Three-1</div> <div class="test">Three-2</div> </div> </div> </div> <br/> <input type='button' value='Find div One' id='button1'> <input type='button' value='Find div Two' id='button2'> <input type='button' value='Find div Three' id='button3'> <script type="text/javascript"> $(document).ready(function(){ $("#button1").click(function () { $('div').css('background','white'); $('div .One').find('.test').css('background','blue'); }); $("#button2").click(function () { $('div').css('background','white'); $('div .Two').find('.test').css('background','blue'); }); $("#button3").click(function () { $('div').css('background','white'); $('div .Three').find('.test').css('background','blue'); }); }); </script> </body> </html>
I really hope that this article was useful to you. If you have any questions regarding this article, let me know in the comments below.
I like your template , way you present the post and details
Thanks buddy.. keep it up.