Hints
To select parent of parent element can use two parent() functions.
Example : 1 Explain selecting parent of parent element with parent function.When you click child element the css applied to parent of parent element.
Instead of that use closest() function.Using closest function is the best way.
Example:2 Explain selecting parent of parent element with closest function.When you click child element the css applied to parent of parent element.
|
Example : 1 Explain selecting parent of parent element with parent function
<html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$(".child").click(function () {
$(this).parent().parent().css("color", "red");
});
});
</script>
</head>
<body>
<div class="parentOfParent">parent of parent
<div class="parent">parent
<div class="child">childOne</div>
<div class="child">childTwo</div>
</div>
</div>
</body>
</html>
|
Example: 1 Demo
|
Example:2 Explain selecting parent of parent element with closest function
<html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$(".child").click(function () {
$(this).closest('div.parentOfParent').css("color", "red");
});
});
</script>
</head>
<body>
<div class="parentOfParent">parent of parent
<div class="parent">parent
<div class="child">childOne</div>
<div class="child">childTwo</div>
</div>
</div>
</body>
</html>
|
Example: 2 Demo
|