jQuery prevUntil() Method

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

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

Syntax

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

$(selector).prevUntil(stop,filter)

Parameters

This method accepts the following optional parameters −

stop (optional): A selector expression indicating the element to stop at.
filter (optional): A string containing a selector expression to filter the results.

Example 1

In the following example, we are using the prevUntil() method to select all the sibling elements between the <div> elements with class "start" and "end" −

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

When we execute the above program, selected elements will be highlighted with yellow background color.

Example 2

Here, we are demonstrating the usage of prevUntil() method with "filter" parameter.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $(".target").prevUntil(".start", ".highlight").css("background-color", "yellow");
});
</script>
</head>
<body>
<div class="start">Div element (with class 'start').</div>
  <p class="highlight">Paragraph element (with class 'highlight').</p>
  <p class="highlight">Paragraph element (with class 'highlight').</p>
  <p>Paragraph element.</p>
  <div class="target">Div element (with class 'target').</div>
  <p class="highlight">Paragraph element (with class 'highlight') This element won't be highlighted because it is out side the range of the specified elements.</p>
</body>
</html>

When we execute the above program, it selects and highlights the elements with class "highlight" in between the <div> elements with class "start" and "target".

Example 3

In the below example, we are returning all elements with class names "one" and "two", that are in between the <div> elements with class "start" and "target" −

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

When we execute the above program, selected elements will be highlighted with yellow background color.

jquery_ref_traversing.htm

Print Page