jQuery find() example

With 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 id="A1">

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

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

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

		</div>

	</div>

</div>

1. $(‘#A1’).find(‘.child’)


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

Find an element which contains the id of “A1“, and its child element that contains the class name of “child“, then change its background to red.

2. $(‘#A2’).find(‘.child’)


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

Find an element which contains the id of “A2“, and its child element that contains the class name of “child“, then change its background to red.

3. jQuery find() example

Play this example.

HTML 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');
		
	$('#A1').find('.child').css('background','red');
			
    });
	
    $("#button2").click(function () {
		
	$('div').css('background','white');
		
	$('#A2').find('.child').css('background','red');
			
    });
	
    $("#button3").click(function () {
		
	$('div').css('background','white');
		
	$('#A3').find('.child').css('background','red');
			
    });

  });
</script>
</head>
<body>

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

<br/>
<br/>
<br/>

<input type='button' value='find #A1' id='button1'>
<input type='button' value='find #A2' id='button2'>
<input type='button' value='find #A3' id='button3'>

</body>
</html>

Reference

  1. jQuery find() API documentation

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
11 Comment threads
3 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
RaheelClydebenandyDifference between find() and children() in jQuery Recent comment authors
newest oldest most voted
zdfg
Guest
zdfg

what a terrible explanation of find() …. lol

This is why people hate javascript, because of poor documentation

Raheel
Guest
Raheel

Awesome thanks buddy

Clyde
Guest
Clyde

I copied your code to see if I could work with it and understand it a bit better but when I tried to open the file in a browser it did not function. Did I miss something is there a library you have referenced or something like that? I really would like to work with this code on my computer but, as I said it seems to work fine here but not after I copied it to my hard drive. Thank you for the great information and hopefully you will tell me how to get the code to work on… Read more »

ben
Guest
ben

Good Explanation thank you very much !

andy
Guest
andy

“May i know how to improve it?” Because English is my native tongue, it is difficult to understand your use of the written language. You are using the wrong words in your explanation. For example, where you write:”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.” Ex. 1) You are saying “which have child contains a class name… Read more »

trackback
Difference between find() and children() in jQuery

[…] between find() and children() in jQuery By mkyong – May 16, 2010 jquery selector Both find() and children() methods are used to filter the child of the matched elements, except the former is […]

xxxxx
Guest
xxxxx

anybody know i have 5 div all are have some function if i clicked 1st div then only 2nd div should active other wise won’t active

trackback
How to use the jQuery .find() method (JavaScript DOM manipulation) | JavaScript Mountain
Supahoopsa
Guest
Supahoopsa

Can anyone help with a problem with a JQuery Find?
In the example below I want to find the select & text objects within Div1. Here is the HTML:
[code]

:

[/code]

Here is the jQuery:
Select1 = jQuery(“#div1”).find(“#Select1”)[0];
Text1 = jQuery(“#div1”).find(“#Text1”)[0];

Select1 comes back as undefined, but it finds the Text1 object.

Can anyone tell me why I can’t find the Select1 object?

mos
Guest
mos

how to do it with ol and li?

<ol id=bbb
<li class=aaa
<li class=aaa

i had tried
$('ol').css('background-color','white');
$('#bbb .aaa').find("*").css('background-color','');

but with no luck…
thanks,

trackback
jQuery Tutorials | J2EE Web Development Tutorials

[…] find() selector Select certain elements from a set of the matched elements (Descendants only). […]