Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
How to select parent of parent in jquery in Jquery functions of JQuery Examples
3320 Views
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 
Best Lessons of "JQuery Examples"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details