Hello Readers,
parents() is the jquery method and it is same as parent() method but the difference is that parents() method return the all ancestors of the given selector which include parent, grandparent, great-grandparent, great-great-grandparent and so on. If we use parents() method without parameter then it returns all the ancestors and if we pass the filter parameter inside the parents() method then it gives the result as per filter parameter.
Syntax :
$(selector).parents(filter)
filter : filter is the optional parameter which specifies a selector expression to search down the ancestors.
Code Example :
<html>
<head>
<style>
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").parents().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="ancestors">body (great-great-grandparent)
<div style="width:500px;">div (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
In the above code we use the parents() method and select all ancestors of the selector <span> tag and change it's color and border in jquery.
0 Comment(s)