closest()
从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素。
.closest(selector)
- selector类型: Selector。一个用于匹配元素的选择器字符串。
.closest(selector[, context ])
- selector类型: Selector。一个用于匹配元素的选择器字符串。
- context类型: Element。匹配元素可能在这个 DOM 元素内查找到。(注:如果提供这个参数,那么在这个DOM元素内查找匹配的元素,可以使用这个参数减小查找范围,如果在这个在这个DOM元素内没有查找到匹配的元素,那么返回空的jQuery对象。可选参数)
.closest(jQuery object)
- jQuery object类型: jQuery。一个用于匹配元素的jQuery对象。
.closest(element)
- 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 开始查找<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>
的颜色,因为它既是项目A的第一个<ul>
祖先又是项目II的一个后裔。它将不会改变level-1 <ul>
的颜色,因为它不是项目II的后代。
例子
显示什么样的事件委托能用closest完成。closest 列表元素或者其后代被点击进行切换一个黄色的背景。
<!DOCTYPE html> <html> <head> <style> li { margin: 3px; padding: 3px; background: #EEEEEE; } li.hilight { background: yellow; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
- Click me!
- You can also Click me!
传递一个jQuery对象给closest. closest 列表元素或者其后代被点击进行切换一个黄色的背景。
<!DOCTYPE html> <html> <head> <style> li { margin: 3px; padding: 3px; background: #EEEEEE; } li.hilight { background: yellow; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
- Click me!
- You can also Click me!