In jQuery, you can use the find() to search through all the descendants(child, grandchild, great-grandchild…any levels deep) of the matched element.

For example, div elements with three levels deep.

<div class="A1">
	<div class="child">A1-1</div>
	<div class="child">A1-2</div>
 
	<div class="A2">
		<div class="child">A2-1</div>
		<div class="child">A2-2</div>
 
		<div class="A3">
			<div class="child">A3-1</div>
			<div class="child">A3-2</div>
		</div>
	</div>
</div>

1. $(‘div .A1′).find(‘.child’)

$('div .A1').find('.child').css('background','red');

Match div elements which have child contains a class name of “A1“, and search through the “A1” child that contains class name of “child”. In this case, no element is selected, because “div .A1” is not match, there have no child contains class name of “A1“, the “A1” is a parent.

P.S If you want to select all the A1, A2 and A3 child, your code should change to following

$('.A1').find('.child').css('background','red');

2. $(‘div .A2′).find(‘.child’)

$('div .A2').find('.child').css('background','red');

Match div elements which have child contains a class name of “A2“, and search through the “A2” child that contains a class name of “child”. In this case, all the “A2” and “A3” child are selected.

3. $(‘div .A3′).find(‘.child’)

$('div .A3').find('.child').css('background','red');

Match div elements which have child contains a class name of “A3“, and search through the “A3” child that contains a class name of “child”. In this case, only the “A3” child are selected.

jQuery find() example

Play this 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() example</h1>
 
<script type="text/javascript">
 
  $(document).ready(function(){
 
    $("#button1").click(function () {
 
	$('div').css('background','white');
 
	$('div .A1').find('.child').css('background','red');
 
    });
 
    $("#button2").click(function () {
 
	$('div').css('background','white');
 
	$('div .A2').find('.child').css('background','red');
 
    });
 
    $("#button3").click(function () {
 
	$('div').css('background','white');
 
	$('div .A3').find('.child').css('background','red');
 
    });
 
  });
</script>
</head><body>
 
<div class="A1">
	<div class="child">A1-1</div>
	<div class="child">A1-2</div>
 
	<div class="A2">
		<div class="child">A2-1</div>
		<div class="child">A2-2</div>
 
		<div class="A3">
			<div class="child">A3-1</div>
			<div class="child">A3-2</div>
		</div>
	</div>
 
</div>
 
<br/>
<br/>
<br/>
 
<input type='button' value='find div .A1' id='button1'>
<input type='button' value='find div .A2' id='button2'>
<input type='button' value='find div .A3' id='button3'>
 
</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