Main Tutorials

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 Author

author image
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.

Comments

Subscribe
Notify of
11 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
zdfg
12 years ago

what a terrible explanation of find() …. lol

This is why people hate javascript, because of poor documentation

Raheel
6 years ago

Awesome thanks buddy

Clyde
10 years ago

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 my hard drive.

ben
11 years ago

Good Explanation thank you very much !

andy
11 years ago

“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 of “A1“,” Do you mean which have “children” or a class name of “child”? This is confusing for people learning.

Ex. 2) You wrote: “… because “div .A1” is not match, there have no child contains class name of “A1“, ” What does this mean “there have no child”?

I’m not an English teacher, but since you asked how you can improve your tutorial, improving the english version of your tutorial would help me.

andy
11 years ago
Reply to  mkyong

Thank you for editing the English version. I definitely understand your tutorial much better now.

xxxxx
11 years ago

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

Supahoopsa
13 years ago

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
13 years ago

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,