返回值:jQueryclosest(selector)

取得与选择器相匹配的第一个元素，从当前元素开始，在 DOM 树中向上查找。

若一个 jQuery 对象代表了一个 DOM 元素集合，.closest() 方法会在 DOM 树中查找这些元素和它们的祖先元素，并根据匹配到的元素构建一个新的 jQuery 对象。.parents() 和 .closest() 方法很类似，它们都是在 DOM 树中向上遍历。虽然它们之间的区别很微妙，但是却很重要：

.closest() .parents()
从当前元素开始查找 从父元素开始查找
在 DOM 树中向上遍历，直到找到了与提供的选择器相匹配的元素 在 DOM 树中向上遍历，直至文件的根元素，将每个祖先元素添加到一个临时的集合中，若提供了选择器，则会使用该选择器在集合中进行过滤
返回包括 0 个或 1 个 元素的 jQuery 对象 返回包括 0 个， 1 个 或多个元素的 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 树中向上遍历，直到找到了所提供的表达式列表项 A。

我们可以指定一个 DOM 元素作为 context 来限定查找元素的范围。

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

示例:

该例子展示了如何在事件代理中应用 closest。当点击列表项时，会切换显示列表项的背景色，使其变为黄色。

<!DOCTYPE html>
<html>
<head>
<style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
  </style>
<script src="jquery.min.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>

演示:

示例:

将一个 jQuery 对象传入 closest 中。当点击列表项时，会切换显示列表项的背景色，使其变为黄色。

<!DOCTYPE html>
<html>
<head>
<style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
  </style>
<script src="jquery.min.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>

演示:

返回值:Arrayclosest(selectors, [context])

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

从 jQuery 1.7 开始，不再建议使用该方法，但是 jQuery 1.7 之前仍然可以使用。该方法将主要用于 jQuery 内部或插件作者使用。

示例:

该例子展示了如何在事件代理中应用 closest。

<!DOCTYPE html>
<html>
<head>
<style></style>
<script src="jquery.min.js"></script>
</head>
<body>

<ul><li></li><li></li></ul>

<script>


  var close = $("li:first").closest(["ul", "body"]);
  $.each(close, function(i){
  $("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
  });

</script>
</body>
</html>

演示: