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

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


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

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

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

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

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

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

给定一个表示一组 DOM 元素的选择器表达式，.prevUntil() 方法在 DOM 树中搜索这些元素的前身，当它到达与方法的参数匹配的元素时停止。返回的新 jQuery 对象包含所有先前的兄弟姐妹，但不包括 .prevUntil() 选择器匹配的兄弟姐妹；元素按从最近的兄弟到最远的顺序返回。

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

从 jQuery 1.6 开始，第一个 .prevUntil() 参数可以使用 DOM 节点或 jQuery 对象，而不是选择器。

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

例子：

找到从 <dt id="term-2"> 到前面的 <dt> 的兄弟姐妹，并给它们一个红色背景色。此外，查找 <dt id="term-3"> 之前的 <dd> 兄弟，直到 <dt id="term-1"> 并给它们一个绿色的文本颜色。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prevUntil 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" ).prevUntil( "dt" )
  .css( "background-color", "red" );
 
var term1 = document.getElementById( "term-1" );
$( "#term-3" ).prevUntil( term1, "dd" )
  .css( "color", "green" );
</script>
 
</body>
</html>

演示：

相关用法


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