jQuery next() Method

The next() method in jQuery is used to select the immediately following sibling element of each element in the selected set.

Siblings are elements that belong to the same parent. In other words, elements with the same parent are sibling elements.

This method traverses the DOM to find the next sibling element. Only the next sibling element that matches the specified selector (if provided) will be selected.

Syntax

Following is the syntax of next() method in jQuery −

$(selector).next(filter)

Parameters

This method accepts the following optional parameter −

filter: A selector expression used to filter the next sibling elements. It narrows down the search to match specific criteria, such as class, ID, element type, etc.

Example 1

In the following example, we are demonstrating the basic usage of next() method in jQuery −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("div").next().css("background-color", "#40a944");
      });
    });
  </script>
</head>
<body>
  <button>Find sibling</button>
  <div style="padding: 10px;  border: 1px solid black;">This is div element.</div>
  <p style="padding: 10px;  border: 1px solid black;">This is p element.</p>
  <h1 style="padding: 10px;  border: 1px solid black;">This is h1 element.</p>
</body>
</html>

When the "Find sibling" button is clicked, the jQuery next() method will select the next sibling element of the "div" (which is the "p" element), and its background color is changed to green.

Example 2

In the following example, we are selecting the next sibling element of each <div> element −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("div").next().css("background-color", "#40a944");
      });
  </script>
</head>
<body>
  <div style="padding: 10px;  border: 1px solid black;">This is div element.</div>
  <p>paragraph element 1 (sibling to above div element).</p>
  <p>paragraph element 2</p>

  <div style="padding: 10px;  border: 1px solid black;">
    <p>I'm paragraph inside the div (I wont be considered as sibling).</p>
  </div>
  <p>I'm paragraph inside the div (considered as sibling).</p>
  <p>I'm another paragraph.</p>
</body>
</html>

When we execute the above program, next() method selects the next sibling element of the "div" and changes its background color to green.

Example 3

In the below example, we are providing "p" element as parameter to the next() method to select the next sibling <p> element of each <div> element −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("div").next("p").css("background-color", "#40a944");
      });
  </script>
</head>
<body>
  <div style="padding: 10px;  border: 1px solid black;">This is div element.</div>
  <p>paragraph element 1 (next sibling to above div element).</p>
  <p>paragraph element 2</p>

  <div style="padding: 10px;  border: 1px solid black;">
    <p>I'm paragraph inside the div (I wont be considered as sibling).</p>
  </div>
  <span>span element.</span>
  <p>paragraph element 1.</p>
  <p>paragraph element 2.</p>
</body>
</html>

After executing the above program, next() method selects the next sibling <p> element of each "div" element and changes its background color to green.

jquery_ref_traversing.htm

Print Page