EN
jQuery - parent and children functions example
14 points
In this article, we would like to show you how to traverse elements using jQuery.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div { padding: 5px; }7
8
#my-parent { border: 3px solid red; }9
#my-element { border: 3px solid blue; }10
11
</style>12
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>13
</head>14
<body>15
<div id="my-parent">16
<div id="my-element">My element...</div>17
</div>18
<script>19
20
$(document).ready(function() {21
var element = $('#my-element');22
var parent = element.parent(); // element.parent('div'); // 'div' as selector23
24
parent.css('border-width', '10px');25
});26
27
</script>28
</body>29
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
margin: 5px;8
padding: 5px;9
}10
11
#my-element { border: 3px solid blue; }12
13
.level-1 { border: 3px solid red; }14
.level-2 { border: 3px solid orange; }15
16
</style>17
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>18
</head>19
<body>20
<div id="my-element">21
<div class="level-1">22
<div class="level-2">Child 1-1</div>23
<div class="level-2">Child 1-2</div>24
<div class="level-2">Child 1-3</div>25
</div>26
<div class="level-1">27
<div class="level-2">Child 2-1</div>28
<div class="level-2">Child 2-2</div>29
<div class="level-2">Child 2-3</div>30
</div>31
</div>32
<script>33
34
$(document).ready(function() {35
var element = $('#my-element');36
var children = element.children();37
38
children.css('border-width', '15px');39
40
children.each(function(index, element) {41
var subChildren = $(element).children();42
43
subChildren.css('border-style', 'dashed');44
});45
});46
47
</script>48
</body>49
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
margin: 5px;8
padding: 5px;9
}10
11
#my-element { border: 3px solid blue; }12
13
.level-1 { border: 3px solid red; }14
.level-2 { border: 3px solid orange; }15
16
</style>17
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>18
</head>19
<body>20
<div id="my-element">21
<div class="level-1">22
<div class="level-2 type-1">Child 1-1</div>23
<div class="level-2 type-2">Child 1-2</div>24
<div class="level-2 type-1">Child 1-3</div>25
</div>26
<div class="level-1">27
<div class="level-2 type-2">Child 2-1</div>28
<div class="level-2 type-1">Child 2-2</div>29
<div class="level-2 type-1">Child 2-3</div>30
</div>31
</div>32
<script>33
34
$(document).ready(function() {35
var element = $('#my-element');36
var children = element.children();37
38
children.css('border-width', '15px');39
40
children.each(function(index, element) {41
var child = $(element);42
43
var subChildren1 = child.children('.type-1');44
var subChildren2 = child.children('.type-2');45
46
subChildren1.css('border-style', 'dashed');47
subChildren2.css('border-style', 'double');48
});49
});50
51
</script>52
</body>53
</html>