Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Sbiling in jquery with demo

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 707
    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:

    <div style="width:450px;" class="parentSibling">
      <ul>sibling Parent
        <li>sibling previous</li>
        <li>sibling previous</li>
        <li class="sibling">li (sibling)</li>
        <li>sibling next</li>
        <li>sibling next</li>
      </ul>
    </div>
    

    JS:

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

    CSS:

    .parentSibling * {
        display: block;
        border: 2px solid #333;
        color: #fff;
        padding: 5px;
        margin: 15px;
        background: lightblue;
    }

    You can also download the demo attached.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: