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:-

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:-

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

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