.nextUntil()

類別： 遍歷 > 樹狀遍歷

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

說明： 取得每個元素的所有後續同層元素，直到（但不包含）與傳入的選擇器、DOM 節點或 jQuery 物件相符的元素。

針對表示 DOM 元素集合的選取器表達式，.nextUntil() 方法會搜尋 DOM 樹中這些元素的後繼，直到找到與方法引數相符的元素為止。傳回的新 jQuery 物件包含所有後續同層元素，但不包含與 .nextUntil() 引數相符的元素。

如果未找到選取器或未提供選取器，將選取所有後續同層元素；在這些情況下，它會選取與 .nextAll() 方法在未提供篩選器選取器時相同的元素。

從 jQuery 1.6 開始，可以將 DOM 節點或 jQuery 物件（而非選取器）傳遞給 .nextUntil() 方法。

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

範例

找出後接 <dt id="term-2"> 直到下一個 <dt> 的同層元素，並給它們紅色背景顏色。另外，找出後接 <dt id="term-1"> 直到 <dt id="term-3"> 的 <dd> 同層元素，並給它們綠色文字顏色。

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nextUntil 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" )
  .nextUntil( "dt" )
    .css( "background-color", "red" );
var term3 = document.getElementById( "term-3" );
$( "#term-1" )
  .nextUntil( term3, "dd" )
    .css( "color", "green" );
</script>
 
</body>
</html>

示範