jQuery parentsUntil() 方法

jQuery 中的 parentsUntil() 方法用於選擇 selector 和 stop 之間的所有祖先同級元素。返回的元素不包括 selector 和 stop。

此方法從給定的父元素開始，向上遍歷父元素及其祖先，直到找到特定元素。

注意：如果此方法未指定引數，則它將返回所有後續祖先元素，這與使用 parents() 方法類似。

語法

以下是 jQuery 中 parentsUntil() 方法的語法：

$(selector).parentsUntil(stop,filter)

引數

此方法接受以下可選引數：

stop（可選）：指示停止處的元素的選擇器表示式。
filter（可選）：包含用於篩選結果的選擇器表示式的字串。

示例 1

在以下示例中，我們選擇 <span> 和 <body> 元素之間的所有祖先元素：

<html>
<head>
<style>
.ancestors * { 
   display: block;
   border: 2px solid lightgrey;
   color: lightgrey;
   padding: 5px;
   margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("span").parentsUntil("body").css({"color": "red", "border": "2px solid green"});
});
</script>
</head>
<body class="ancestors"> body: great-great-grandparent
  <div style="width:300px;">div: great-grandparent
    <ul>ul: grandparent
      <li>li: parent
        <span>child</span>
      </li>
    </ul>   
  </div>
</body>
</html>

當我們執行上述程式時，所有選定的祖先元素都將以紅色和綠色背景突出顯示。

示例 2

在下面的示例中，我們選擇 <span> 和 <body> 元素之間的多個祖先元素（<p>、<ul>、<div>）：

<html>
<head>
<style>
.ancestors * { 
   display: block;
   border: 2px solid lightgrey;
   color: lightgrey;
   padding: 5px;
   margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("span").parentsUntil("body", "p, ul, div").css({"color": "red", "border": "2px solid green"});
});
</script>
</head>
<body class="ancestors"> body: great-great-great-grandparent
  <div style="width:300px;">div: great-great-grandparent
    <ul>ul: great-grandparent
      <li>li: grandparent
        <p>p: parent
          <span>child</span>
        </p>
      </li>
    </ul>   
  </div>
</body>
</html>

執行上述程式後，所有選定的多個祖先元素都將以紅色和綠色背景突出顯示。

jquery_ref_traversing.htm

列印頁面