.closest()
.closest( selector ) 返回： jQuery
描述： 從元素本身開始，逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素。
-
version added: 1.3.closest( selector )
selector一個(gè)用于匹配元素的選擇器字符串。
-
version added: 1.4.closest( selector, [ context ] )
selector一個(gè)用于匹配元素的選擇器字符串。
contextDOM元素在其中一個(gè)匹配的元素可以被發(fā)現(xiàn)。如果沒有上下文在當(dāng)時(shí)的情況下通過了jQuery設(shè)置將被使用。
-
version added: 1.6.closest( jQuery object )
jQuery object一個(gè)用于匹配元素的jQuery對(duì)象。
-
version added: 1.6.closest( element )
element一個(gè)用于匹配元素的DOM元素。
鑒于一個(gè)jQuery對(duì)象，表示一個(gè)DOM元素的集合，.closest()方法允許我們能夠通過搜索這些元素和DOM樹，并在他們的祖先從匹配的元素構(gòu)造一個(gè)新的jQuery對(duì)象。.parents()和.closest()方法類似，它們都在DOM樹遍歷了。兩者之間的差異，盡管細(xì)微，是重要的：
| .closest() | .parents() | |
|---|---|---|
| 開始于當(dāng)前元素 | 開始于父元素 | |
| 向上遍歷DOM樹，直到它找到一個(gè)匹配的供選擇 | 向上遍歷DOM樹到文檔的根元素，每個(gè)祖先元素加入到臨時(shí)集合，而是一個(gè)選擇器，過濾器的基礎(chǔ)上，如果一個(gè)是該集合提供 | |
| 返回的jQuery對(duì)象包含零個(gè)或一個(gè)元素 | 返回的jQuery對(duì)象包含零個(gè)，一個(gè)或多個(gè)元素 |
<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>
假設(shè)我們從項(xiàng)目 A開始執(zhí)行一個(gè)搜索<ul>：
$('li.item-a').closest('ul')
.css('background-color', 'red');
這將改變level-2 <ul>的顏色，因?yàn)楫?dāng)向上遍歷DOM樹時(shí)，這是第一次遇到的匹配元素。
假設(shè)我們是一個(gè)搜索<li>元素來代替：
$('li.item-a').closest('li')
.css('background-color', 'red');
這將改變一個(gè)列表項(xiàng)A的顏色。.closest()方法開始從元素本身開始前進(jìn)了DOM樹的遍歷，項(xiàng)目A時(shí)停止匹配選擇。
我們可以傳遞一個(gè)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>的顏色,因?yàn)樗仁琼?xiàng)目A的第一個(gè)<ul>祖先又是項(xiàng)目II的一個(gè)后裔。它將不會(huì)改變level-1 <ul>的 顏色 ，因?yàn)樗皇琼?xiàng)目II的后裔。
Example:
顯示什么樣的事件委托能用closest完成。closest 列表元素或者其后代被點(diǎn)擊進(jìn)行切換一個(gè)黃色的背景。
<!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: 傳遞一個(gè)jQuery對(duì)象給closest. closest 列表元素或者其后代被點(diǎn)擊進(jìn)行切換一個(gè)黃色的背景。
<!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
描述： 從元素本身開始，逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素。
-
version added: 1.4.closest( selectors, [ context ] )
selector一個(gè)用于匹配元素的選擇器字符串。
contextDOM元素在其中一個(gè)匹配的元素可以被發(fā)現(xiàn)。如果沒有上下文在當(dāng)時(shí)的情況下通過了jQuery設(shè)置將被使用。
這種方法主要是為了內(nèi)部使用或插件作者。
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>