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

  1. find() – search through the matched elements’ child, grandchild, great-grandchild…any levels down.
  2. 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>
Try Demo
Any Java questions or problems? please post at this JavaNullPointer.com forum, see you there ~
[ Read More ] You can find more similar articles at jQuery Tutorials