EN
jQuery - parent and children functions example
14
points
In this article, we would like to show you how to traverse elements using jQuery.
1. parent method example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div { padding: 5px; }
#my-parent { border: 3px solid red; }
#my-element { border: 3px solid blue; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<div id="my-parent">
<div id="my-element">My element...</div>
</div>
<script>
$(document).ready(function() {
var element = $('#my-element');
var parent = element.parent(); // element.parent('div'); // 'div' as selector
parent.css('border-width', '10px');
});
</script>
</body>
</html>
2. children method example
2.1. All children's example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
margin: 5px;
padding: 5px;
}
#my-element { border: 3px solid blue; }
.level-1 { border: 3px solid red; }
.level-2 { border: 3px solid orange; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<div id="my-element">
<div class="level-1">
<div class="level-2">Child 1-1</div>
<div class="level-2">Child 1-2</div>
<div class="level-2">Child 1-3</div>
</div>
<div class="level-1">
<div class="level-2">Child 2-1</div>
<div class="level-2">Child 2-2</div>
<div class="level-2">Child 2-3</div>
</div>
</div>
<script>
$(document).ready(function() {
var element = $('#my-element');
var children = element.children();
children.css('border-width', '15px');
children.each(function(index, element) {
var subChildren = $(element).children();
subChildren.css('border-style', 'dashed');
});
});
</script>
</body>
</html>
2.2. Filtered children example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
margin: 5px;
padding: 5px;
}
#my-element { border: 3px solid blue; }
.level-1 { border: 3px solid red; }
.level-2 { border: 3px solid orange; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<div id="my-element">
<div class="level-1">
<div class="level-2 type-1">Child 1-1</div>
<div class="level-2 type-2">Child 1-2</div>
<div class="level-2 type-1">Child 1-3</div>
</div>
<div class="level-1">
<div class="level-2 type-2">Child 2-1</div>
<div class="level-2 type-1">Child 2-2</div>
<div class="level-2 type-1">Child 2-3</div>
</div>
</div>
<script>
$(document).ready(function() {
var element = $('#my-element');
var children = element.children();
children.css('border-width', '15px');
children.each(function(index, element) {
var child = $(element);
var subChildren1 = child.children('.type-1');
var subChildren2 = child.children('.type-2');
subChildren1.css('border-style', 'dashed');
subChildren2.css('border-style', 'double');
});
});
</script>
</body>
</html>