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>
what a terrible explanation of find() …. lol
This is why people hate javascript, because of poor documentation
May i know how to improve it?
Awesome thanks buddy
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.
Good Explanation thank you very much !
“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.
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 🙂
Thank you for editing the English version. I definitely understand your tutorial much better now.
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
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?
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,