.parentsUntil()

.parentsUntil( [ selector ] ) 官网原E文: jQuery

描述: 查找当前元素的所有的前辈元素,直到遇到选择器匹配的元素为止,不包括那个匹配到的元素。

  • version added: 1.4.parentsUntil( [ selector ] )

    selector选择器字符串,用于确定到哪个前辈元素时停止匹配。

>如果提供一个jQuery对象代表DOM元素集合, .parentsUntil() 方法会找遍所有这些元素的前辈元素,直到遇到了跟参数匹配的元素才会停止。返回的jQuery对象中包含了所有找到的前辈元素,除了与 .parentsUntil() 选择器匹配的那个元素。考虑如下的嵌套列表:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <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>

如果我们从项目 A 开始找它的前辈,但不包括 <ul class="level-1"> ,就可以用下面代码:

$('li.item-a').parentsUntil('.level-1')
    .css('background-color', 'red');

结果就是 level-2 列表和项目 II 的背景变红。

如果提供给 .parentsUntil() 的选择器没有匹配到任何东西,或者干脆没有提供选择器,那么返回的对象会是这个对象所有的前辈元素。例如再次从项目 A 开始找,但这次使用一个匹配不到任何东西的选择器:

$('li.item-a').parentsUntil('.not-here')
    .css('background-color', 'red');

其结果是给 level-2 列表, 项目 II, level-1 列表, <body> 元素和 <html> 元素都设置了红色背景。

Example:

查找 <li class="item-a"> 的前辈,直到 <ul class="level-1"> 为止,并给它们设置红色背景。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <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');
</script>

</body>
</html>

Demo:

jQuery 1.6 API 中文版Clove整理、修订