siblings method in jQuery with examples

1. siblings() method gets the sibling of each element in the set matched elements.
2. The elements selected in jQuery object using siblings() method can be furthur filtered using selector.



Example 1 :


        <html>
        <head>
        <title>sibling</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = {
                    'color': 'Red',
                    'text-decoration': 'underline',
                    'font-size': '30px'
                }
                $("#myButton").click(function () {
                    $("#targetLi").siblings().css(css);
                });
            });
        </script>
        </head>
        <body>
        <ul type="circle">
        <li>Javascript</li>
        <li id="targetLi">Jquery</li>
        <li>MVC</li>
        <li>Linq</li>
        </ul>
        <input type="button" id="myButton" value="Click ME"/>
        </body>
        </html>
    
Demo :




In the above example, we have created an unordered list, with id attribute assigned to one of the li element. On button click using id selector li element is selected and using siblings() method all sibings are selected in jQuery object and CSS is applied to it.



Example 2 :



        <html>
        <head>
        <title>sibling</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = {
                    'color': 'Red',
                    'text-decoration': 'underline',
                    'font-size': '30px'
                }
                $("#sibling").click(function () {
                    $("#targetDiv").siblings().css(css);
                });
                $("#siblingSelector").click(function () {
                    $("#targetDiv").siblings("p").css(css);
                });
            });
        </script>
        </head>
        <body>
        <div id="mainDiv">
        <div id="targetDiv">This is div element inside another div.</div>
        <p>This is paragraph1 inside div element. It is sibling to div with id = "targetDiv" </p>
        <span>This is span element.</span><br>
        <em>This is emphasize element.<em>
        </div>
        <input type="button" id="sibling" value="Siblings" />
        <input type="button" id="siblingSelector" Value="Siblings with Selector" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>
    
Demo :




In the above example, we have created a main div and inside that div, we have created different elements. We have two buttons. On click of "siblings" button we are selecting div with id="targetDiv" and using siblings() method we are selecting all its sibing and applying CSS to it.
    On the other hand, on click of "Siblings with Selector" we are selecting all siblings of targetDiv and filtering it using selector and applying CSS to it.


0 comments:

Post a Comment