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

siblings() function used to select the sibling elements of parent element.
Example 1 : when you click the sibling element the css applied to the corresponding all siblings element.

Related topics:

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

children() function used to select the child element of parent element.
Example 3 : when you click the parent element the css applied to the corresponding child element.
Example 1 : 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: 1 Demo 
Example 2: 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: 2 Demo 
Example 3 : 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: 3 Demo 
Previous Topics
Previous lessons of current book.
  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