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>
do you think someone reads this bullshit?
I read it… and it helped
This is not bullshit! I read it too and helped me as well.
what goes around comes around
Thanks