Skip to content
Learn to use jQuery children method with examples
In This Tutorial
The children method
The children method is used to return the first level child of the specified element. This method searches only to the first level downward. In order to find all descendant elements, you can use the jQuery find method.
See an example of children method
To make it clearer, consider the following simple structure:
<div>
<p>some text
<span>some text</span>
</p>
</div>
In that case, the <p> is child of div element while <span> is grandchild or second level child of div element.
In the above structure, if you specify the div element while using the children method, it will search the paragraph only. Similarly, if you specify the paragraph it will find span element, which is the child of the paragraph.
add a CSS class by children method example
However, if you need to find and apply changes to all elements downward to that div (paragraph and span) then you should use the find method of jQuery.
Syntax of children method
The general syntax of children jQuery method is:
$(“parent”).children(“child”);
Where parent element can be a selector like a div, paragraph etc.
In the section below, we will show you examples of using the children method. We will use jQuery children method to change the first-level child element presentation.
Children example to add text to child element
In the following example, a div is a parent element of a paragraph. As you click on the button, it will add text at the end of the paragraph.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“div”).children(“p”).after(“test “);
});
});
</script>
</head>
<body>
<div id=“divfind”>This is div parent element!
<p>This is child paragraph of Div<br />
<span>This is span, child of paragraph and grand child of div</span>
</p>
</div>
<hr />
<button id=“removeatt”>Run children method</button>
</body>
</html>
|
First, we searched the first level child of div element by using the children method and then jQuery after method is used to add text.
The children example to add CSS to child element
The example below adds CSS by using jQuery children method.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“div”).children(“p”).css({“border”:“1px solid #C03009”});
});
});
</script>
</head>
<body>
<div id=“divfind”>This is div parent element!
<p>This is child paragraph of Div<br />
<span>This is span, child of paragraph and grand child of div</span>
</p>
</div>
<hr />
<button id=“removeatt”>Run children method</button>
</body>
</html>
|
If you use <span> element rather <p> in the above example, it will not work. In order to impact all descendant elements use jQuery find method.
To go upwards, from child to parent level use jQuery parents method.
In this example, as we have a button which is the child of paragraph and grandchild of the div element. As you click on button “Run children method” it will add class to the button element.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“p”).children(“#childbtn”).addClass(“btnclass”);
});
});
</script>
<style>
.btnclass
{
color: #C03009;
font-size: 17px;
}
</style>
</head>
<body>
<div id=“divfind”>This is div parent element!
<p>This is child paragraph of Div<br />
<button id=“childbtn”>Next</button>
</p>
</div>
<hr />
<button id=“removeatt”>Run children method</button>
</body>
</html>
|
You can see, we used ‘P’ in the children method.
jQuery remove children example
You can use the remove method with jQuery children method to remove the first level child. In this example, as you click the button it will remove a button which is the child of the paragraph.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
</script>
<script>
$(document).ready(function(){
$(“#removeatt”).click(function(){
$(“p”).children(“#childbtn”).remove();
});
});
</script>
</head>
<body>
<div id=“divfind”>This is div parent element!
<p>This is child paragraph of Div<br />
<button id=“childbtn”>Next</button>
</p>
</div>
<hr />
<button id=“removeatt”>Run children method</button>
</body>
</html>
|
Useful links: jQuery find | jQuery parents
Leave A Comment?