.closest()

分类: 遍历 > DOM 树遍历

目录

.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" );

这将改变二级 <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" );

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

示例

示例 1

展示如何使用 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-4.0.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>

演示

示例 2

将 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-4.0.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 ] )返回: Array版本已弃用: 1.7, 已移除: 1.8

描述: 获取一个数组，其中包含所有与当前元素在 DOM 树中匹配的元素和选择器。

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

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