Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to find the next element in jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 510
    Comment on it

    Here we will learn how to find the next element of the current.

    In jquery the .next() method is used find the immediate sibling of the given element in the DOM(Document Object Model).

    In .next() method only the sibling elements will be selected not child element.

    Elements having common parent are called siblings.

    Below are the similar methods:-

    1.  nextAll() - get all the sibling elements next to the given element.
    2.  nextUntil() - get all the sibling elements upto the arguments passed.


    Syntax of .next() method is:-

    $(selector).next(filter)

     

    Here is the example of .next() method:-

    HTML-

    <div> <!-- this is the main container -->
            <ul> <!-- this is the parent of list -->
               <!-- These all are the siblings below -->
                <li>jQuery Events</li>
                <li class="second_list">jQuery Effects</li>
                <li>jQuery Traversing</li>
                <li>jQuery Misc</li>
                <li>jQuery load</li>
            </ul>
          <button class="btn1">Click here to see effect</button>
     </div> 

     

    CSS-

    div{ 
            width: 60%; /*width of main container*/
            margin: 0 auto;  /*For container to align center*/
            text-align: center;
            }
            li{
                /*list properties*/
            font-size: 20px;
            padding: 10px 5px;
            color: #fff;
            background-color: #808000;
            list-style: none;
            }
            button{
                padding: 10px 5px;
                font-size: 12px;
                border: 1px solid #000;
                background-color: #000;
                color: #fff;
                font-size: 12px;
            }

     

    jQuery-

    On click of a button, the color and background color of next sibling list will be changed.

     

    $(document).ready(function(){
        $(".btn1").click(function() { 
        $( "li.second_list" ).next().css( "background-color", "#801a00" ).css( "color", "#ff9933" );
         });
     });

     

    Below is the link to explain above code clearly:-

    https://jsfiddle.net/4tgtjq0g/

     

    This is the link of .nextAll() method, which is similar to .next() method.

    In .nextAll() method all the next siblings will be selected.

    https://jsfiddle.net/dj3tuzrg/1/

     

 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: