.closest()
返回: jQuery
.closest( selector )
描述：针对集合中的每个元素，通过测试元素本身以及在DOM树中遍历它的后代元素，获得第一个匹配选择器的元素。
加入于: 1.3
.closest( selector )- selector类型：Selector一个字符串，它包含了一个选择器表达式，用来匹配所针对的元素。
加入于: 1.4
.closest( selector [, context ] )加入于: 1.6
.closest( selection )- selection类型：jQuery一个jQuery对象，用来匹配所针对的元素。
加入于: 1.6
.closest( element )- element类型：Element一个元素，用来匹配所针对的元素。
给定一个jQuery对象，代表了一个DOM元素集合，.closest()方法在DOM树中搜索遍三个元素和它们的祖先元素，并从匹配的元素构造了一个新的jQuery对象.parents()方法和.closest()方法很近似，因为它们同样会沿着DOM树向上遍历。两者的区别，虽然很微妙，但是很重要：
.closest() | .parents() |
|---|---|
| 从当前元素开始 | 从父元素开始 |
| 向上遍历DOM树，直到找到一个匹配给定选择器的元素。 | 向上遍历DOM树，直到document的根元素，加上每个祖先元素作为一个临时集合；然后它根据一个选择器筛选这个集合，如果提供了选择器的话。 |
| 返回的jQuery对象针对原始集合中的每个元素，包含了零个或者一个元素。 | 返回的jQuery对象针对原始集合中的每个元素，包含零个或多个元素，以document顺序的倒序。 |
<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>
假设我们对<ul>元素实施了一个搜索，从项目A开始：
$( "li.item-a" ) .closest( "ul" ) .css( "background-color", "red" );
这将改变第二层<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" );
这将改变第二层<ul>的字色，因为它既是项目A的第一个<ul>祖先元素，又是项目II的后代元素。然而，它不会改变第一层<ul>的字色，因为它不是列表项目II的后代元素。
示例
显示事件委托如何在最接近的元素上完成。最接近的列表元素，在它的后代元素被点击时，切换到一个黄色的背景。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>closest demo</title>
<style>
li {
margin: 3px;
padding: 3px;
background: #EEEEEE;
}
li.hilight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
$( document ).on( "click", function( event ) {
$( event.target ).closest( "li" ).toggleClass( "hilight" );
});
</script>
</body>
</html>
演示结果
向最接近的元素传递一个jQuery对象。最接近的列表元素，在它或它的后代元素被点击时，切换到一个黄色的背景。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>closest demo</title>
<style>
li {
margin: 3px;
padding: 3px;
background: #EEEEEE;
}
li.hilight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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 ).on( "click", function( event ) {
$( event.target ).closest( listElements ).toggleClass( "hilight" );
});
</script>
</body>
</html>
演示结果