Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Sbiling in jquery with demo

    @siddharth.shahi
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 764
    Comment on it

    It returns all the sibling elements of the element that you have selected.

    It allows you to go through the siblings of the matched elements in the DOM tree and creates a new jQuery object from the matching elements.

    Lets see how it works:

    HTML:

    1. <div style="width:450px;" class="parentSibling">
    2.   <ul>sibling Parent
    3.     <li>sibling previous</li>
    4.     <li>sibling previous</li>
    5.     <li class="sibling">li (sibling)</li>
    6.     <li>sibling next</li>
    7.     <li>sibling next</li>
    8.   </ul>
    9. </div>
    10.  

    JS:

    1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    2. $(document).ready(function(){
    3.     $("li.sibling").siblings().css({"color": "blue", "border": "2px solid blue"});
    4. });

    CSS:

    1. .parentSibling * {
    2.     display: block;
    3.     border: 2px solid #333;
    4.     color: #fff;
    5.     padding: 5px;
    6.     margin: 15px;
    7.     background: lightblue;
    8. }

    You can also download the demo attached.

    sibling html css JQuery Demo simple example Blog
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: