.prevUntil()

Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

Given a selector expression that represents a set of DOM elements, the .prevUntil() method searches 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; the elements are returned in order from the closest sibling to the farthest.

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.

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

The method optionally accepts a selector expression for its second argument. If this argument is supplied, the elements will be filtered by testing whether they match it.

.prevUntil( [selector ] [, filter ] )

version added: 1.4

selector

Selector

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

filter

Selector

A string containing a selector expression to match elements against.

.prevUntil( [element ] [, filter ] )

version added: 1.6

element

Element or jQuery

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

filter

Selector

A string containing a selector expression to match elements against.

Examples:

Find the siblings that precede <dt id="term-2"> up to the preceding <dt> and give them a red background color. Also, find previous <dd> siblings of <dt id="term-3"> up to <dt id="term-1"> and give them a green text color.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prevUntil demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<dl>
  <dt id="term-1">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 id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>
 
<script>
$( "#term-2" ).prevUntil( "dt" )
  .css( "background-color", "red" );
 
var term1 = document.getElementById( "term-1" );
$( "#term-3" ).prevUntil( term1, "dd" )
  .css( "color", "green" );
</script>
 
</body>
</html>

Links:

http://api.jquery.com/prevuntil

doc_jQuery

2016-03-27 13:48:59

Comments