加载中...

closest()1.7*

概述    .closest( selector )

返回值：jQuery

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

  • V : 1.3.closest( selector )

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

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

    • selector
      类型: Selector
      一个用于匹配元素的选择器字符串。
    • context
      类型: Element
      匹配元素可能在这个 DOM 元素内查找到。（手册网注：如果提供这个参数，那么在这个DOM元素内查找匹配的元素，可以使用这个参数减小查找范围，如果在这个在这个DOM元素内没有查找到匹配的元素，那么返回空的jQuery对象。可选参数）

  • V : 1.6.closest( jQuery object )

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

  • V : 1.6.closest( element )

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

鉴于一个jQuery对象，表示一个DOM元素的集合，.closest()方法允许我们在DOM树上查找这些匹配的元素和他们的祖先元素，并且构造一个新的jQuery对象。.parents()和.closest()方法类似，它们都在DOM树遍历了。两者之间的差异，尽管细微，是重要的：

.closest() .parents()
开始于当前元素 开始于父元素
在 DOM 树中向上遍历，直到找到与提供的选择器相匹配的元素 向上遍历DOM树到文档的根元素，每个祖先元素加入到临时集合，如果提供一个选择器，则会使用该选择器在集合中进行过滤
返回包含零个或一个元素的jQuery对象 返回包含零个，一个或多个元素的jQuery对象 
  1. <ul id="one" class="level-1">
  2.   <li class="item-i">I</li>
  3.   <li id="ii" class="item-ii">II
  4.   <ul class="level-2">
  5.     <li class="item-a">A</li>
  6.     <li class="item-b">B
  7.       <ul class="level-3">
  8.         <li class="item-1">1</li>
  9.         <li class="item-2">2</li>
  10.         <li class="item-3">3</li>
  11.       </ul>
  12.     </li>
  13.     <li class="item-c">C</li>
  14.   </ul>
  15.   </li>
  16.   <li class="item-iii">III</li>
  17. </ul>

假设我们从列表项 A 开始查找<ul>： 

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

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

假设我们这次搜索<li>元素，那么： 

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

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

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

  1. var listItemII = document.getElementById('ii');
  2. $('li.item-a').closest('ul', listItemII)
  3.   .css('background-color', 'red');
  4. $('li.item-a').closest('#one', listItemII)
  5.   .css('background-color', 'green');

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

示例

实例

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

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

运行一下

实例

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

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

运行一下

概述    .closest( selectors [, context ] )过时: 1.7, 移除: 1.8

返回值：Array

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

  • V : 1.4.closest( selectors [, context ] )

    • selectors
      类型: Array
      数组或字符串，其中包含一个选择表达式匹配的元素对（也可以是一个jQuery对象）。
    • context
      类型: Element
      匹配元素可能在这个 DOM 元素内查找到。
下面这个方法 (only!) jQuery1.7中不赞成使用，在jQuery1.8中被删除。它主要是为了让插件作者在内部使用。

还没有评论.