.next()

Syntax

.next([selector])

Parameters

selector (optional): A string containing a selector expression to match elements against

Return value

The new jQuery object.

Description

Get the immediately following sibling of each element in the set of matched elements, optionally filtered by a selector.

Examples

Next class

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("button[disabled]").next(".selected").text("data");
        });
    </script>
    <style>
      .y { background:yellow; }
  </style>
  </head>
  <body>
    <body>
       <div><button disabled="disabled">First</button> - <span class="selected"></span></div>
  </body>
</html>

Click to view the demo

Get next tag

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
          $("input[name='me']").next().text(" changed");
    });
    </script>
  </head>
  <body>
      <div>
        <input type="radio" name="me" value="A" />
        <span>data</span>
      </div>
      <div>
        <input type="radio" name="me" value="B" />
          <span>data</span>
      </div>
      <div>
        <input type="radio" name="me" value="C" />
        <span>data</span>
      </div>
  </body>
</html>

Click to view the demo

Find the very next sibling of each paragraph that has a class "selected".

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

              $("p").next(".selected").css("background", "yellow");

        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello</p>
        <p class="selected">Hello Again</p>


    </body>
</html>

Click to view the demo

Next after <p>

 
<html>
  <head>
    <script type="text/javascript" src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("p").next().text("asdf");
        });
    </script>
  </head>
  <body>
    <body>
        <p>bad or .</p><span>good</span>
    </body>
</html>

Click to view the demo