EN
jQuery - how to use parents function example
12
points
Using jQuery it is possible to traverse elements with parents method in the following ways.
1. parents method example
1.1. All parents' example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div { padding: 5px; }
#my-parent-3 { border: 3px solid red; }
#my-parent-2 { border: 3px solid green; }
#my-parent-1 { border: 3px solid orange; }
#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-3">
<div id="my-parent-2">
<div id="my-parent-1">
<div id="my-element">My element...</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var element = $('#my-element');
var parents = element.parents();
parents.css('border-width', '10px');
});
</script>
</body>
</html>
1.2. Filtered parents example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div { padding: 5px; }
#my-parent-3 { border: 3px solid red; }
#my-parent-2 { border: 3px solid green; }
#my-parent-1 { border: 3px solid orange; }
#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-3" class="bound">
<div id="my-parent-2" class="middle">
<div id="my-parent-1" class="bound">
<div id="my-element">My element...</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var element = $('#my-element');
// 'div.bound' can be replaced with any css selector
var parents = element.parents('div.bound');
parents.css('border-width', '10px');
});
</script>
</body>
</html>