Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
How to select parent element in jquery in Jquery functions of JQuery Examples
1850 Views
Note 
First of all understand about which is parent element,Child element and siblings element.


parent() function is used to select the parent element of child element.
Example 1: when you click the child element the css applied to the corresponding parent element.

Related topics:

children() function used to select the child element of parent element.
Example 2 : when you click the parent element the css applied to the corresponding child element.

siblings() function used to select the sibling elements of parent element.
Example 3 : when you click the sibling element the css applied to the corresponding all siblings element.
Example 1: when you click the child element the css applied to the corresponding parent element
<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().css("color", "red");
            });
        });
    </script>

</head>

<body>
    <div class="parent">
        <div class="child">childOne</div>
        <div class="child">childTwo</div>
    </div>
</body>

</html>
Example 1: Demo 
Example 1 :Html page source
<!-- After click the child div the css applied to the parent div -->
<body style="">
   <div class="parent" style="color: red;">
       <div class="child">childOne</div>
       <div class="child">childTwo</div>
   </div>
</body>
Example 2 : when you click the parent element the css applied to the corresponding child element
<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 () {
            $(".parent").click(function () {
                $(this).children().css("color", "red");
            });
        });
    </script>

</head>

<body>
    <div class="parent">
        <div class="child">childOne</div>
        <div class="child">childTwo</div>
    </div>
</body>

</html>
Example: 2 Demo 
Example 3 : when you click the sibling element the css applied to the corresponding all siblings element
<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).siblings().css("color", "red");
            });
        });
    </script>

</head>

<body>
    <div class="parent">
        <div class="child">siblingOne</div>
        <div class="child">siblingTwo</div>
        <div class="child">siblingThree</div>
        <div class="child">siblingFour</div>
    </div>
</body>

</html>
Example :3 Demo 
  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