.closest()
.closest( selector ) 返回： jQuery
描述： 從元素本身開始，逐級向上級元素匹配，并返回最先匹配的祖先元素。
-
version added: 1.3.closest( selector )
selector一個用于匹配元素的選擇器字符串。
-
version added: 1.4.closest( selector, [ context ] )
selector一個用于匹配元素的選擇器字符串。
contextDOM元素在其中一個匹配的元素可以被發(fā)現(xiàn)。如果沒有上下文在當時的情況下通過了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開始執(zhí)行一個搜索<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元素在其中一個匹配的元素可以被發(fā)現(xiàn)。如果沒有上下文在當時的情況下通過了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>