jQuery children() example
In jQuery, children() is used to find the child of the matched elements, it’s only travels a single level down.
For example, div elements with three levels deep, contains a class name of “child” and “orphan”.
<div class="A1">
<div class="child">A1-1</div>
<div class="child">A1-2</div>
<div class="orphan">A1-3</div>
<div class="child">A1-4</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. $(‘.A1’).children()
$('.A1').children().css('background','red');
Match elements that contains a class name of “A1“, and all the A1 “single level child“.
P.S The A2 and A3 child will be ignore.
2. $(‘.A1’).children(‘.child’)
$('.A1').children('.child').css('background','red');
Match elements that contains a class name of “A1“, and search through the “A1” child that contains a class name of “child”. In this example, all the A1 “single level child” except child with a class name of “orphan” will be select.
jQuery children() 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 children() example</h1>
<script type="text/javascript">
$(document).ready(function(){
$("#buttonChildren1").click(function () {
$('div').css('background','white');
$('.A1').children().css('background','red');
});
$("#buttonChildren2").click(function () {
$('div').css('background','white');
$('.A1').children('.child').css('background','red');
});
});
</script>
</head><body>
<div class="A1">
<div class="child">A1-1</div>
<div class="child">A1-2</div>
<div class="orphan">A1-3</div>
<div class="child">A1-4</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='.A1 children()' id='buttonChildren1'>
<input type='button' value='.A1 children(child)' id='buttonChildren2'>
</body>
</html>
About Author
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.
Hi sir..
You are doing a great job.I learnt many concepts from your examples.you have made one mistake in the above coding.You didn’t open script tag in the above code.you have opened tag 2 times in the above coding.
A lot of thanks for all of your labor on this blog. Debby loves managing internet research and it is obvious why. We learn all of the compelling manner you offer insightful tricks through your web blog and in addition encourage participation from other people on the area of interest and my daughter is without question learning a great deal. Have fun with the rest of the new year. You have been conducting a fabulous job.
1. $(‘.A1’).children().css(‘background’,’red’);
P.S The A2 and A3 child will be ignore.
? Testing in IE8 & Safari 5.0.2, the background color of A2 and A3 child will also be red.