jQuery.closest() 函数详解

转自： https://codeplayer.vip/p/j7soo
jQuery.closest() 函数详解
closest()函数用于从当前匹配元素开始，逐级向上级选取符合指定表达式的第一个元素，并以jQuery对象的形式返回。
这里的表达式包括：选择器(字符串)、DOM元素(Element)、jQuery对象。
以下面这段HTML代码为例：

A B C D E

F

以下jQuery示例代码用于演示closest()函数的具体用法： //返回jQuery对象所有匹配元素的标识信息数组 //每个元素形如：#id function getTagsInfo($doms){ return $doms.map(function(){ return "#" + this.id; }).get(); }

// 匹配n6元素
var $n6 = $("#n6");

// 从n6元素自身开始，逐级向上查找第一个p元素
var $p = $n6.closest(“p”);
document.writeln( getTagsInfo( $p ) ); // #n1

// 从n6元素自身开始，逐级向上查找第一个span元素
// 由于n6自己就是span元素，因此直接返回n6
var $span = $n6.closest(“span”);
document.writeln( getTagsInfo( $span ) ); // #n6

// 匹配所有包含类名"start"的span元素：n6、n13
var $starts = $(“span.start”);

// 从包含类名"active"的span元素自身开始，逐级向上查找第一个包含类名"active"的元素
// 1、从n6自身开始逐级向上查找，n6自己就是包含类名"active"的元素，因此匹配n6
// 2、从n13自身开始逐级向上查找，n9是包含类名"active"的元素，因此匹配n9
var $actives = $starts.closest(".active");
document.writeln( getTagsInfo( $actives ) ); // #n6,#n9

// 从包含类名"active"的span元素自身开始，逐级向上查找第一个包含类名"active"的元素
// 并且，如果当前查找遇到n12，就停止向上查找
// 1、从n6自身开始逐级向上查找，查找符合条件的n6，因此匹配n6(查找过程中没有经过n12)
// 2、从n13自身开始逐级向上查找，在找到符合条件的n9之前会先经过n12，因此无法匹配n9
var $actives = $starts.closest(".active", document.getElementById(“n12”));
document.writeln( getTagsInfo( $actives ) ); // #n6

// 1、从n6自身开始逐级向上查找，查找符合条件的n6，因此匹配n6(查找过程中没有经过n8)
// 2、从n13自身开始逐级向上查找，查找符合条件的n9，因此匹配n9(查找过程中没有经过n8)
var $actives = $starts.closest(".active", document.getElementById(“n8”));
document.writeln( getTagsInfo( $actives ) ); // #n6,#n9

// 参数( “:even”, document.getElementById(“n9”) ) 相当于 ( “#n9 :even” )，匹配n10、n12
// 1、从n6自身开始逐级向上查找，没有一个元素为n10或n12
// 2、从n13自身开始逐级向上查找，找到符合条件的n12，因此匹配12
var $doms = $starts.closest( “:even”, document.getElementById(“n9”) );
document.writeln( getTagsInfo( $doms ) ); // #n12