How to select sibling in jquery in Jquery functions of JQuery Examples

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

Click here to see 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

Click here to see 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

Click here to see Demo

Next Topics

Next lessons of current book.

How to select parent of parent in jquery

Jquery functions of JQuery Examples

How to give css in jquery

Jquery functions of JQuery Examples

How to give multiple css in jquery

Jquery functions of JQuery Examples

Slideup in jquery example

Jquery functions of JQuery Examples