當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。