jQuey Parent Method in ASP.NET
The jQuery parent() method is used to get the ancestors of each element in the DOM tree through the current set of matched elements.
As you know the terms parent, child, and sibling are used to describe the relationships. Parent nodes have children and children on the same level are called siblings. The jQuery parent() method is used to get the ancestors of each element in the DOM tree through the current set of matched elements.
This method optionally accepts a selector expression of same type which we pass to the $() function. The elements will be filtered by testing whether they match it or not if the selector is supplied.
Example
Here is an example to find out all the unique div parent elements of each span.
<html>
<head><title>jQuery Parent Selector</title>
<style>
p, div, span {margin:2px; padding:1px; }
div { border:2px white solid; }
span { cursor:pointer; font-size:12px; }
.selected { color:red; }
b { color:blue; display:block; font-size:14px; }
.style1
{
color: #33CC33;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body style="background-color: #F7F7F7">
<p>
<div style="font-family: Verdana; font-size: small">
<div><span>Hello!</span></div>
<span>Welcome to vbdotnetheaven,</span>
</div>
<div style="font-family: Verdana; font-size: small">
<span>Share your ideas with us.</span>
</div>
</p>
<b class="style1"
style="font-family: Verdana; font-size: small; font-weight: bold">Click on
each statement to toggle their parents.</b>
<script>
function showParents() {
$("div").css("border-color", "white");
var len = $("span.selected")
.parents("div")
.css("border", "2px blue solid")
.length;
$("b").text("Number of unique div parents are: " + len);
}
$("span").click(function () {
$(this).toggleClass("selected");
showParents();
});
</script>
</body>
</html>
Output Result
Now click on the first word to find out all unique div parent elements of each span.
