jQuery children() example

by

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>
Try Demo

mkyong

Founder of Mkyong.com, passionate Java and open-source technologies. If you enjoy my tutorials, consider making a donation to these charities.

3 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
arjunan
12 years ago

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.

0
Reply
goods
13 years ago

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.

0
Reply
jocosn
15 years ago

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.

0
Reply