Difference between find() and children() in jQuery
Both find() and children() methods are used to filter the child of the matched elements, except the former is travels any level down, the latter is travels a single level down.
To simple
- find() – search through the matched elements’ child, grandchild, great-grandchild…any levels down.
- children() – search through the matched elements’ child only (single level down).
See the below example to understand the different between find() and children().
jQuery find() vs children() example
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
div{
padding:8px;
border:1px solid;
}
</style>
</head>
<body>
<h1>jQuery find() vs children() example</h1>
<script type="text/javascript">
$(document).ready(function(){
$("#testChildren").click(function () {
$('div').css('background','white');
$('.B1').children('.child').css('background','red');
});
$("#testFind").click(function () {
$('div').css('background','white');
$('.B1').find('.child').css('background','red');
});
});
</script>
</head><body>
<div class="B1">
<div class="child">B1-1</div>
<div class="child">B1-2</div>
<div class="orphan">B1-3 - Orphan</div>
<div class="child">B1-4</div>
<div class="B2">
<div class="child">B2-1</div>
<div class="child">B2-2</div>
<div class="orphan">B2-2 - Orphan</div>
<div class="B3">
<div class="child">B3-1</div>
<div class="orphan">B3-2 - Orphan</div>
<div class="child">B3-3</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<input type='button' value='.B1 children(child)' id='testChildren'>
<input type='button' value='.B1 find(child)' id='testFind'>
</body>
</html>
About Author
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.
Thanks
do you think someone reads this bullshit?
what goes around comes around
This is not bullshit! I read it too and helped me as well.
I read it… and it helped