# .closest()

所属分类：遍历 > 树遍历 英文文档：.closest()

## .closest( selector )返回: jQuery

描述: 从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。

- #### 添加的版本: 1.3.closest( selector )

  - selector
    类型: Selector
    一个用于匹配元素的选择器字符串。

- #### 添加的版本: 1.4.closest( selector [, context ] )

  - selector
    类型: Selector
    一个用于匹配元素的选择器字符串。
  - context
    类型: Element
    DOM元素在其中一个匹配的元素可以被发现。如果没有上下文在当时的情况下通过了jQuery集合将被使用。

- #### 添加的版本: 1.6.closest( jQuery object )

  - jQuery object
    类型: jQuery
    一个用于匹配元素的jQuery对象。

- #### 添加的版本: 1.6.closest( element )

  - element
    类型: Element
    一个用于匹配元素的DOM元素。

鉴于一个jQuery对象，表示一个DOM元素的集合，`.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 |
    $('li.item-a').closest('ul')  .css('background-color', 'red');

这将改变level-2 `<ul>`的颜色，因为当向上遍历DOM树时，这是第一次遇到的匹配元素。

假设我们是一个搜索`<li>`元素来代替：

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

其结果是改变了列表项 A 的元素。`.closest()`方法是从自身元素开始查找的，然后在 DOM 树中向上遍历，直到找到了所提供的表达式列表项 A。

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

1 2 3 4 5 |
    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');

这将改变level-2 `<ul>`的颜色,因为它既是项目A的第一个`<ul>`祖先又是项目II的一个后裔。它将不会改变level-1 `<ul>`的 颜色 ，因为它不是项目II的后代。

## 例子:

#### Example: 显示什么样的事件委托能用closest完成。closest 列表元素或者其后代被点击进行切换一个黄色的背景。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
    <!DOCTYPE html><html><head>  <style>  li { margin: 3px; padding: 3px; background: #EEEEEE; }  li.hilight { background: yellow; }  </style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <ul>    <li><b>Click me!</b></li>    <li>You can also <b>Click me!</b></li>  </ul><script>  $( document ).bind("click", function( e ) {    $( e.target ).closest("li").toggleClass("hilight");  });</script> </body></html>

#### Demo:

#### Example: 传递一个jQuery对象给closest. closest 列表元素或者其后代被点击进行切换一个黄色的背景。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
    <!DOCTYPE html><html><head>  <style>  li { margin: 3px; padding: 3px; background: #EEEEEE; }  li.hilight { background: yellow; }  </style>  <script src="https://code.jquery.com/jquery-latest.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 ).bind("click", function( e ) {    $( e.target ).closest( $listElements ).toggleClass("hilight");  });</script> </body></html>

#### Demo:

## .closest( selectors [, context ] )返回: Array version deprecated: 1.7, removed: 1.8

描述: 以数组的形式返回与选择器相匹配的所有元素，从当前元素开始，在 DOM 树中向上遍历。

- #### 添加的版本: 1.4.closest( selectors [, context ] )

  - selectors
    类型: Array
    数组或字符串，其中包含一个选择表达式匹配的元素对（也可以是一个jQuery对象）。
  - context
    类型: Element
    用于查找可能匹配到的 DOM 元素。如果不提供 context 参数，那么会使用 jQuery 集合的 context。

下面这个方法 (only!) jQuery1.7中不赞成使用，在jQuery1.8中被删除。它主要是为了让插件作者在内部使用。