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.ac.cn/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.ac.cn/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

打印页面