.parentsUntil()

類別：遍歷 > 樹狀結構遍歷

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

說明：取得目前匹配元素集中每個元素的祖先，直到但未包含與選擇器、DOM 節點或 jQuery 物件相符的元素。

給定一個表示一組 DOM 元素的選取器表達式，.parentsUntil() 方法會遍歷這些元素的祖先，直到它到達與方法參數中傳遞的選取器相符的元素。產生的 jQuery 物件包含所有祖先，直到但不到與 .parentsUntil() 選取器相符的那個。

如果選取器不符或未提供，將選取所有祖先；在這些情況下，它會選取與 .parents() 方法在未提供選取器時選取的相同元素。

從 jQuery 1.6 開始，DOM 節點或 jQuery 物件（而非選取器）可用於第一個 .parentsUntil() 參數。

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

範例

找出 <li class="item-a"> 的祖先，直到 <ul class="level-1">，並給它們一個紅色背景顏色。此外，找出 <li class="item-2"> 的祖先，它們有一個「yes」類別，直到 <ul class="level-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
38
39
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>parentsUntil demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<ul class="level-1 yes">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2 yes">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
 
<script>
$( "li.item-a" )
  .parentsUntil( ".level-1" )
    .css( "background-color", "red" );
 
$( "li.item-2" )
  .parentsUntil( $( "ul.level-1" ), ".yes" )
    .css( "border", "3px solid green" );
</script>
 
</body>
</html>

示範