.prevUntil()

類別：循覽 > 樹狀循覽

.prevUntil( [selector ] [, filter ] )傳回：jQuery

說明：取得每個元素的所有前一個兄弟元素，直到與選擇器、DOM 節點或 jQuery 物件相符的元素為止，但並不包含該元素。

給定表示一組 DOM 元素的選取器表達式，.prevUntil() 方法會搜尋這些元素在 DOM 樹中的前身，並在到達與方法引數相符的元素時停止。傳回的新 jQuery 物件包含所有前一個同層元素，直到且不包含與 .prevUntil() 選取器相符的元素；元素會從最接近的同層元素到最遠的同層元素依序傳回。

如果未比對到選取器或未提供選取器，將會選取所有前一個同層元素；在這些情況下，它會選取與 .prevAll() 方法在未提供篩選選取器時選取的元素相同。

自 jQuery 1.6 起，DOM 節點或 jQuery 物件（而非選取器）可以用於第一個 .prevUntil() 引數。

此方法可選擇性地接受其第二個引數的選取器表達式。如果提供此引數，將會透過測試元素是否與其相符來篩選元素。

範例

找出在 <dt id="term-2"> 之前的所有同層元素，直到前一個 <dt>，並給它們紅色背景顏色。此外，找出 <dt id="term-3"> 之前的所有 <dd> 同層元素，直到 <dt id="term-1">，並給它們綠色文字顏色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prevUntil demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.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>

示範