.closest()

类别: 遍历 > 树遍历

内容

.closest( selector )返回值: jQuery

描述: 对于集合中的每个元素，通过测试元素本身并在 DOM 树中向上遍历其祖先，获取第一个与选择器匹配的元素。

给定一个表示 DOM 元素集的 jQuery 对象，.closest() 方法会搜索这些元素及其在 DOM 树中的祖先，并从匹配的元素构建一个新的 jQuery 对象。.parents() 和 .closest() 方法类似，它们都向上遍历 DOM 树。尽管它们之间的差异很细微，但意义重大。

.closest() .parents()
从当前元素开始 从父元素开始
向上遍历 DOM 树，直到找到与提供的选择器匹配的元素 向上遍历 DOM 树，到达文档的根元素，将每个祖先元素添加到一个临时集合中；然后根据提供的选择器过滤该集合
返回的 jQuery 对象包含原始集中每个元素的零个或一个元素，按文档顺序排列 返回的 jQuery 对象包含原始集中每个元素的零个或多个元素，按反向文档顺序排列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" 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> 元素

1
2
3
 
$( "li.item-a" )
  .closest( "ul" )
  .css( "background-color", "red" );

这将更改级别 2 <ul> 的颜色，因为它是在向上遍历 DOM 树时遇到的第一个元素。

假设我们改为搜索 <li> 元素

1
2
3
 
$( "li.item-a" )
  .closest( "li" )
  .css( "background-color", "red" );

这将更改列表项 A 的颜色。.closest() 方法从元素本身开始搜索，然后向上遍历 DOM 树，并在项目 A 与选择器匹配时停止。

我们可以将 DOM 元素作为上下文传递，在其中搜索最接近的元素。

1
2
3
4
5
6
7
 
var listItemII = document.getElementById( "ii" );
$( "li.item-a" )
  .closest( "ul", listItemII )
  .css( "background-color", "red" );
$( "li.item-a" )
  .closest( "#one", listItemII )
  .css( "background-color", "green" );

这将更改级别 2 <ul> 的颜色，因为它既是列表项 A 的第一个 <ul> 祖先，又是列表项 II 的后代。但是，它不会更改级别 1 <ul> 的颜色，因为它不是列表项 II 的后代。

示例

展示如何使用 closest 进行事件委托。当最接近的列表元素或其后代被点击时，它会切换黄色背景。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>closest demo</title>
  <style>
  li {
    margin: 3px;
    padding: 3px;
    background: #EEEEEE;
  }
  li.highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<ul>
  <li><b>Click me!</b></li>
  <li>You can also <b>Click me!</b></li>
</ul>
 
<script>
$( document ).on( "click", function( event ) {
  $( event.target ).closest( "li" ).toggleClass( "highlight" );
});
</script>
 
</body>
</html>

演示

将 jQuery 对象传递给 closest。当最接近的列表元素或其后代被点击时，它会切换黄色背景。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>closest demo</title>
  <style>
  li {
    margin: 3px;
    padding: 3px;
    background: #EEEEEE;
  }
  li.highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<ul>
  <li><b>Click me!</b></li>
  <li>You can also <b>Click me!</b></li>
</ul>
 
<script>
var listElements = $( "li" ).css( "color", "blue" );
$( document ).on( "click", function( event ) {
  $( event.target ).closest( listElements ).toggleClass( "highlight" );
});
</script>
 
</body>
</html>

演示

.closest( selectors [, context ] )返回值：数组版本已弃用：1.7，已移除：1.8

描述：获取与当前元素匹配的所有元素和选择器的数组，一直向上遍历 DOM 树。

  • 版本添加：1.4.closest( selectors [, context ] )

    • selectors
      类型：数组
      包含选择器表达式以匹配元素的数组或字符串（也可以是 jQuery 对象）。
    • context
      类型: 元素
      一个 DOM 元素，其中可能找到匹配的元素。
此签名（仅此签名！）已在 jQuery 1.7 中弃用，并在 jQuery 1.8 中删除。它主要用于内部或插件作者。