jQuery nextAll() Method

The nextAll() method in jQuery is used to select all the sibling elements that come after the selected element.

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

This method traverses through the sibling elements, starting from the immediately following sibling and continuing until the end of the selected element's parent.

Syntax

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

$(selector).nextAll(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 using the nextAll() method to return all the sibling elements of <div> −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("div").nextAll().css("background-color", "#40a944");
      });
  </script>
</head>
<body>
  <div>This is (div) element.</div>
  <p>This is paragraph 1</p>
  <p>This is paragraph 2</p>
  <p>This is paragraph 3</p>
  <p>This is paragraph 4</p>
  <p>This is paragraph 5</p>
</body>
</html>

When we execute the above program, nextAll() method selects all the elements under <div> element and changes its background to green.

Example 2

In the example below, we are returning the sibling elements with class name "one", from the "<p> element with class 'demo' −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("p.demo").nextAll(".one").css("background-color", "#40a944");
      });
  </script>
</head>
<body>
  <div>This is div element.</div>
  <p>paragraph 1</p>
  <p class="demo">paragraph 2 (class: demo) - Parent</p>
  <p class="one">paragraph 3 (class: one)</p>
  <p>paragraph 4</p>
  <p class="one">paragraph 5 (class: one)</p>
  <p class="one">paragraph 6 (class: one)</p>
  <p>paragraph 7</p>
</body>
</html>

When we execute the above program, nextAll() method selects all the elements with class name "one" under the "<p> element with class 'demo' and changes its background to green.

Example 3

Here, we are returning all elements with class names "one", "two", and "three", that are siblings to the "<p> element with class 'demo' −

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("p.demo").nextAll(".one, .two, .three").css("background-color", "#40a944");
      });
  </script>
</head>
<body>
  <div>This is div element.</div>
  <p>paragraph 1</p>
  <p class="demo">paragraph 2 (class: demo) - Parent</p>
  <p class="one">paragraph 3 (class: one)</p>
  <p>paragraph 4</p>
  <p class="two">paragraph 5 (class: two)</p>
  <p class="three">paragraph 6 (class: three)</p>
  <p class="three">paragraph 7 (class: three)</p>
  <p>paragraph 8</p>
</body>
</html>

After executing the above program, it selects all the elements with class name "one", "two" and "three" under the "<p> element with class 'demo' and changes its background to green.

jquery_ref_traversing.htm

Print Page