当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .nextUntil()用法及代码示例


用法 
.nextUntil(  [selector ] [, filter ] ) => jQuery

说明：获取每个元素的所有后续兄弟，但不包括选择器匹配的元素、DOM 节点或传递的 jQuery 对象。

  • 添加的版本：1.4.nextUntil( [selector ] [, filter ] )

    • selector
      类型：Selector
      一个包含选择器表达式的字符串，用于指示在何处停止匹配后续兄弟元素。
    • filter
      类型：Selector
      一个字符串，包含一个选择器表达式来匹配元素。

  • 添加的版本：1.6.nextUntil( [element ] [, filter ] )

    • element
      类型：Element 或 jQuery
      一个 DOM 节点或 jQuery 对象，指示在何处停止匹配后续兄弟元素。
    • filter
      类型：Selector
      一个字符串，包含一个选择器表达式来匹配元素。

给定一个表示一组 DOM 元素的选择器表达式，.nextUntil() 方法在 DOM 树中搜索这些元素的后继元素，当它到达与方法的参数匹配的元素时停止。返回的新 jQuery 对象包含所有后续兄弟姐妹，但不包括 .nextUntil() 参数匹配的兄弟姐妹。

如果选择器不匹配或未提供，则将选择所有后续兄弟；在这些情况下，它选择的元素与 .nextAll() 方法在没有提供过滤器选择器时所做的相同。

As of jQuery 1.6 ，可以将 DOM 节点或 jQuery 对象而不是选择器传递给 .nextUntil() 方法。

该方法可选地接受选择器表达式作为其第二个参数。如果提供了此参数，则将通过测试它们是否匹配来过滤元素。

例子：

找到跟随 <dt id="term-2"> 直到下一个 <dt> 的兄弟姐妹，并给他们一个红色的背景颜色。此外，找到从 <dt id="term-1"> 到 <dt id="term-3"> 的 <dd> 同级，并给它们一个绿色的文本颜色。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nextUntil demo</title>
  <script src="https://code.jquery.com/jquery-3.5.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>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .nextUntil()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。