jQuery nextUntil() method

The nextUntil() method is an inbuilt jQuery method. It is used to find the next sibling elements between selector and stop. This method traverses forwards along with the siblings of DOM elements.

If the selector is not supplied or not matched, the nextUntil() method will return all next sibling elements as similar to the nextAll() method.

Syntax

The selector in the above syntax is the starting element. It can be a tag name, class name or an id. The nextUntil() method accepts two optional parameters that are defined as follows -

stop: This is an optional parameter. It can be a selector expression, a jQuery object or an element that indicate where to stop the search.

filter: This is an optional parameter. It is a selector expression to narrow down the search.

Let's understand the nextUntil() method using some illustrations.

Example1

Here, there is a div element, including multiple children. We are using the nextUntil() method to get the siblings of the h1 element, as we are passing h1 as the selector.

We are passing the h3 element as the value of the stop parameter of the nextUntil() method. So, the method will return the siblings before the h3 heading element.

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

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

Test it Now

Output

After the execution of the above code, the output will be -

In the above screenshot, we can notice the siblings of the h1 element. On clicking the given button, the method will return the siblings before the h3 heading element. After clicking the given button, the output will be -

Example2

In this example we are using the both optional parameters of the nextUntil() method to filter the search between two elements. We are passing the h1 as the selector, h3 as the stop parameter, and span as the value of the filter parameter. We narrow down the search results by only returning the span elements as the next sibling between the heading h1, and heading h3.

Although, the div also has a span element after the h3 element but the method will only select the span elements occurring before h3.

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

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

Test it Now

Output

After the execution of the above code, the output will be -

On clicking the given button, the span elements before h3 will get selected. After clicking the given button, the output will be -

Example3

This example is similar to the above example. Here, there are multiple span elements between selector and stop. The nextUntil() method will return the span element with id = "s2" as we are narrow down the search by passing the id = "s2" as the filter.

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

<body class = "main"> body
  <div id = "div1"> div element
  <h1> Heading h1 </h1>
<span id = "s1"> span with id = "s1" </span>
<span id = "s2"> span with id = "s2" </span>
<span id = "s3"> span with id = "s3" </span>
<h3> Heading h3 </h3>
	</div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -