jQuery nextUntil() Method

The nextUntil() method in jQuery is used to select all the following siblings elements between the selector and stop. The returned elements will not include the selector and stop.

A sibling is an element that shares the same parent with another element.

Note: If no parameters are specified for this method, it will return all next sibling elements, that is similar to using the nextAll() method.

Syntax

Following is the syntax of nextUntil method in jQuery −

$(selector).nextUntil(stop,filter)

Parameters

This method accepts the following optional parameters −

stop (optional): A string containing a selector expression, DOM element, or jQuery object that specifies where to stop the selection.
filter (optional): A string containing a selector expression to filter the elements that are selected.

Example 1

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

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("p.start").nextUntil("p.stop").css("background-color", "yellow");
});
</script>
</head>
<body>
  <p>Paragraph element</p>
  <p class="start">Paragraph element (with class "start")</p>
  <p>Paragraph element</p>
  <p>Paragraph element</p>
  <p>Paragraph element</p>
  <p class="stop">Paragraph element (with class "stop")</p>
  <p>Paragraph element</p>
</body>
</html>

When we execute the above program, the nextUntil() method selects and returns all sibling elements between p element with class 'start' and p element with class 'stop'.

Example 2

In this example, we are filtering the elements to be selected and returned between two specified elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("p.start").nextUntil("p.stop", ".one, .two, .three, .four").css("background-color", "yellow");
});
</script>
</head>
<body>
  <h1>Heading element</h1>
  <p class="start">Paragraph element (with class "start")</p>
  <p class="one">Paragraph element</p>
  <p>Paragraph element</p>
  <h2 class="two">Paragraph element</h2>
  <div class="three">Div element</div>
  <p class="four">Paragraph element</p>
  <p>Paragraph element</p>
  <p class="stop">Paragraph element (with class "stop")</p>
</body>
</html>

When we execute the above program, the nextUntil() method returns all the elements with class names "one", "two", "three", and "four" that are the next sibling elements between the p element with class name "start" and "stop".

Example 3

The following example uses a DOM element rather than a selector to return all the sibling elements located between the two specified elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("p.start").nextUntil(document.getElementsByClassName("p.stop")).css("background-color", "yellow");
});
</script>
</head>
<body>
  <h1>Heading element</h1>
  <p class="start">Paragraph element (with class "start")</p>
  <p>Paragraph element</p>
  <p>Paragraph element</p>
  <h2">Paragraph element</h2>
  <div>Div element</div>
  <p>Paragraph element</p>
  <p>Paragraph element</p>
  <p class="stop">Paragraph element (with class "stop")</p>
</body>
</html>

After executing the above program, the nextUntil() method selects and returns all the next sibling elements between p element with class 'start' and p element with class 'stop'.

Example 4

In this example, we are using a DOM element instead of a selector and filtering the elements to be returned between two specified elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("p.start").nextUntil(document.getElementsByClassName("p.stop"), ".one, .two, .three, .four").css("background-color", "yellow");
});
</script>
</head>
<body>
  <h1>Heading element</h1>
  <p class="start">Paragraph element (with class "start")</p>
  <p class="one">Paragraph element</p>
  <p>Paragraph element</p>
  <h2 class="two">Paragraph element</h2>
  <div class="three">Div element</div>
  <p class="four">Paragraph element</p>
  <p>Paragraph element</p>
  <p class="stop">Paragraph element (with class "stop")</p>
</body>
</html>

After executing the above program, the nextUntil() method returns all the elements with class names "one", "two", "three", and "four" that are the next sibling elements between the p element with class name "start" and "stop".

jquery_ref_traversing.htm

Print Page