There are three main methods which can be used to traverse a DOM while finding the ancestors of an element.Using jQuery's below mentioned methods we can traverse the DOM tree to the root while finding all the ancestors.
1-) parent()
2-) parents()
3-) parentsUntil()
1-) jQuery's parent() Method
Example of parent() method: It returns the immediate parent of the selected element and traverses only a single level up the DOM tree.
<!DOCTYPE html>
<html>
<head>
<style>
.parent *{
display: block;
border: 1px solid lightgreen;
padding: 4px;
margin: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parent().css({"border-radius": "10px"});
});
</script>
</head>
<body>
<div class="parent">
<div style="width:800px;">
(I am the great-grandparent of span)
<ul>(I am the grand parent of span)
<li>(I am the immediate parent of span)
<span> span </span>
</li>
</ul>
</div>
</div>
</body>
</html>
In the above example the immediate parent of "span" is "li" and the border of the parent are made rounded.
2-) jQuery parents() Method
Example of jQuery's parents() method: All the ancestor elements till the root of the selected element are returned by jQuery's parents() method.
<!DOCTYPE html>
<html>
<head>
<style>
.grandparent * {
display: block;
border: 1px solid blue;
padding: 4px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parents('ul').css({'border-radius':'10px','borderColor' : 'limegreen'});
$("span").parent().css({'background-color': 'yellow'});
$("span").css({'background-color': 'white'});
});
</script>
</head>
<body>
<div class="grandparent">
<div style="width:800px;">
(I am the great-grandparent of span)
<ul>(I am the grand parent of span)
<li>(I am the immediate parent of span)
<span> span </span>
</li>
</ul>
</div>
</div>
</body>
</html>
In the above example all the parents of "span" will have rounded corners and the border color will turn limegreen also the immediate parent background color will turn yellow.
if we want to filter among all the parents we can us parameter for example in the above case we can use "ul" as a parameter to the parents() method :
$("span").parents('ul').css({'border-radius':'10px','borderColor' : 'limegreen'});
3-) jQuery parentsUntil() Method : This method returns all ancestoral elements between the two given arguments.
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parentsUntil("div").css({'border-radius':'10px','borderColor' : 'limegreen'});
});
</script>
</head>
<body>
<div class="greatgrandparent">
<div style="width:800px;">
(I am the great-grandparent of span1 and span2)
<ul>(I am the great-grandparent of span1 and span2)
<ul>(I am the grandparent of span 1)
<li>(I am the immediate parent of span 1)
<span> span 1</span>
</li>
</ul>
<li>(I am the immediate parent of span 2)
<span> span 2 </span>
</li>
</ul>
</div>
</div>
</body>
</html>
In the above example all the parents between the span and div element will have border-radus with 10px; and borderColor turned limegreen
There are more jQuery method such as prev(), prevAll(), prevUntil() , siblings etc. which can be used to tranverse a DOM tree.
0 Comment(s)