prevUntil()

.prevUntil( [selector,] [filter] )

Returns: jQuery

Description: Get all preceding siblings of each element up to but not including the element matched by the selector.

.prevUntil( [selector,] [filter] )

version added: 1.4

selector

String

A string containing a selector expression to indicate where to stop matching preceding sibling elements.

filter

String

A string containing a selector expression to match elements against.

.prevUntil( [element,] [filter] )

version added: 1.6

element

Object, DOM node

A DOM node or jQuery object indicating where to stop matching preceding sibling elements.

filter

String

A string containing a selector expression to match elements against.

Given a jQuery object that represents a set of DOM elements, the .prevUntil() method allows us to search through the predecessors of these elements in the DOM tree, stopping when it reaches an element matched by the method's argument. The new jQuery object that is returned contains all previous siblings up to but not including the one matched by the .prevUntil() selector.

If the selector is not matched or is not supplied, all previous siblings will be selected; in these cases it selects the same elements as the .prevAll() method does when no filter selector is provided.

Consider a page with a simple definition list as follows:

<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

If we begin at the second term, we can find the elements which come after it until a preceding <dt>.

$('#term-2').prevUntil('dt').css('background-color', 'red');

The result of this call is a red background behind definitions 1-a, 1-b, 1-c, and 1-d.

As of jQuery 1.6, A DOM node or jQuery object, instead of a selector, may be used for the first .prevUntil() argument.

Example

Find the siblings that precede <dt id="term-2"> up to the preceding <dt> and give them a red background color.

$("#term-2").prevUntil("dt").css("background-color", "red")

The output of the code above will be:

Try it yourself

Example - Full source:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">
    $(document).ready(function(){
$("#term-2").prevUntil("dt").css("background-color", "red");
   });
  </script>

</head>
<body>
	<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>
<script>
    $("#term-2").prevUntil("dt")
      .css("background-color", "red")
</script>

</body>
</html>

Try it yourself

Was this information helpful?

Yes No

prevUntil()

.prevUntil( [selector,] [filter] )

.prevUntil( [selector,] [filter] )

.prevUntil( [element,] [filter] )

Example

Example - Full source:

Comments