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
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • ben

    Good Explanation thank you very much !

  • 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 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.

    • http://www.mkyong.com mkyong

      Thanks for your comments, and sorry for confusing.

      The example and article is updated with more simple structure and explanation. Hope it’s getting more clear now :)

      • andy

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

  • Pingback: Difference between find() and children() in jQuery()

  • 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

  • http://asdf zdfg

    what a terrible explanation of find() …. lol

    This is why people hate javascript, because of poor documentation

    • http://www.mkyong.com mkyong

      May i know how to improve it?

  • Pingback: How to use the jQuery .find() method (JavaScript DOM manipulation) | JavaScript Mountain()

  • 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

    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,

  • Pingback: jQuery Tutorials | J2EE Web Development Tutorials()