jQuery nextAll() method

The nextAll() method is used to return all next siblings of the specified selector. It is an inbuilt method in jQuery. This method traverses forwards along with the next siblings of DOM elements.

Syntax

The nextAll() method accepts an optional parameter filter, as mentioned in the above syntax. It specifies a selector expression that narrows down the searching of the next siblings. In order to return multiple siblings, we have to separate every expression with a comma.

Let's see some of the illustrations to understand the working of the nextAll() method.

Example1

It is a simple example of using the nextAll() method. Here, there is a div element including four child elements that are two paragraph elements, a ul element, and a heading h2. We are using the nextAll() method to get the next siblings of the p element. We are not using the optional parameter of the nextAll() method.

On clicking the given button, all next siblings of the p element will get selected.

<!DOCTYPE html>
<html>
<head>
<title> jQuery nextAll() method </title>
<style>
.main * {
display: block;
border: 2px solid black;
padding: 10px;
margin: 15px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
$("p").nextAll().css({"color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>
<body class = "main"> body
<div id = "div1"> div element
<p> Paragraph element1 </p>
<p> Paragraph element2 </p>
<ul> ul element </ul>
<h2> Heading h2 </h2>
</div>
<button onclick = "fun()"> click me </button>
</body>
</html>

Test it Now

Output

After clicking the given button, all next siblings of the p element will get selected as shown in the below screenshot -

Example2

In this example, we are using the optional parameter of the nextAll() method to narrow down the search. Here, there is a div element including multiple children. We are passing the p element as the optional parameter of the nextAll() method. So, the method will only return the p elements that are the next siblings of the selector h2.

<!DOCTYPE html>
<html>
<head>
<style>
.main * { 
  display: block;
  border: 2px solid black;
  padding: 10px;
  margin: 15px;
}
</style>w
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
  $("h2").nextAll("p").css({ "color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
  <div id = "div1"> div element
  <h2> Heading h2 </h2>
  <p> Paragraph 1 </p>
<span> span element </span>
<p> Paragraph 2</p>
<ul> ul element </ul>
<p> Paragraph 3 </p>
	</div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After clicking the given button, all next paragraph siblings of the selector h2 will get selected, as shown in the below screenshot -

Example3

This example is similar to the above example, as the nextAll() method will return the p siblings of the selector h2, but there is a paragraph element sharing different parent. So, the method will not consider the corresponding paragraph as the sibling of selector h2 because of having different parent among others.

<!DOCTYPE html>
<html>
<head>
<style>
.main * { 
  display: block;
  border: 2px solid black;
  padding: 10px;
  margin: 15px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
  $("h2").nextAll("p").css({ "color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
  <div id = "div1"> div element
  <h2> Heading h2 </h2>
<p> p element </p>
<span> span element </span>
<p> p element </p>
<div> div element <p> p element </p> </div>
	</div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After clicking the given button, all next paragraph siblings of the h2 element will get selected except one paragraph that has a different parent element, as shown in the below screenshot -