.closest()

Contents:

.closest( selector ) 返回: jQuery

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

  • version added: 1.3.closest( selector )

    selector一个用于匹配元素的选择器字符串。

  • version added: 1.4.closest( selector, [ context ] )

    selector一个用于匹配元素的选择器字符串。

    contextDOM元素在其中一个匹配的元素可以被发现。如果没有上下文在当时的情况下通过了jQuery设置将被使用。

  • version added: 1.6.closest( jQuery object )

    jQuery object一个用于匹配元素的jQuery对象。

  • version added: 1.6.closest( element )

    element一个用于匹配元素的DOM元素。

鉴于一个jQuery对象,表示一个DOM元素的集合,.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树的遍历,项目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');

这将改变level-2 <ul>的颜色

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

Example:

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

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

Demo:

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

<!DOCTYPE html>
<html>
<head>
  <style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-git.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 added: 1.4.closest( selectors, [ context ] )

    selector一个用于匹配元素的选择器字符串。

    contextDOM元素在其中一个匹配的元素可以被发现。如果没有上下文在当时的情况下通过了jQuery设置将被使用。

这种方法主要是为了内部使用或插件作者。

Example:

Show how event delegation can be done with closest.

<!DOCTYPE html>
<html>
<head>
  <style></style>
  <script src="http://code.jquery.com/jquery-latest.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>

Demo:

设计酷,jquery1.6 api中文手册