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

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


用法一

.closest( selector ) => jQuery

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

  • 添加的版本：1.3.closest( selector )

    • selector
      类型：Selector
      一个字符串，包含一个选择器表达式来匹配元素。

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

    • selector
      类型：Selector
      一个字符串，包含一个选择器表达式来匹配元素。
    • context
      类型：Element
      可以在其中找到匹配元素的 DOM 元素。

  • 添加的版本：1.6.closest( selection )

    • selection
      类型：jQuery
      用于匹配元素的 jQuery 对象。

  • 添加的版本：1.6.closest( element )

    • element
      类型：Element
      匹配元素的元素。

给定一个表示一组 DOM 元素的 jQuery 对象，.closest() 方法在 DOM 树中搜索这些元素及其祖先，并从匹配的元素构造一个新的 jQuery 对象。 .parents() 和 .closest() 方法的相似之处在于它们都向上遍历 DOM 树。两者之间的差异虽然微妙，但意义重大：

.closest() .parents()
从当前元素开始 从父元素开始
向上移动 DOM 树，直到找到匹配的选择器 沿着 DOM 树向上移动到文档的根元素，将每个祖先元素添加到临时集合中；然后，如果提供了选择器，它会根据选择器过滤该集合
返回的 jQuery 对象包含原始集合中每个元素的零个或一个元素，按文档顺序排列 返回的 jQuery 对象包含原始集合中每个元素的零个或多个元素，以相反的文档顺序 
<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> 元素：

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

这将改变 level-2 <ul> 的颜色，因为它是在 DOM 树上行进时第一次遇到的。

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

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

这将改变列表项 A 的颜色。.closest() 方法在向上 DOM 树之前开始搜索 with the element itself，并在项 A 匹配选择器时停止。

我们可以传入一个 DOM 元素作为搜索最近元素的上下文。

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 的后代。

例子：

展示如何使用最接近的方式完成事件委托。当单击它或其后代时，最近的列表元素会切换为黄色背景。

<!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.jquery.com/jquery-3.5.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 对象传递给最近的对象。当单击它或其后代时，最近的列表元素会切换为黄色背景。

<!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.jquery.com/jquery-3.5.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 ] )

    • selectors
      类型：Array
      包含选择器表达式的数组或字符串以匹配元素(也可以是 jQuery 对象)。
    • context
      类型：Element
      可以在其中找到匹配元素的 DOM 元素。
此签名(仅！)在 jQuery 1.7 和 jQuery 1.8 中已弃用，removed.它主要是供内部使用或由插件作者使用。

相关用法


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