使用jQuery＆＃x27; $ .closest（）vs $ .parents（）

> jQuery's.closest()vs.parents()：详细的比较

在jQuery的.closest()和.parents()方法之间进行选择，通常会取决于理解其主要差异。 本文阐明了它们的功能并提供了实践示例。 方法 起点 搜索方向 返回值

当前元素 向上dom树 零或一个元素

Method	Starting Point	Search Direction	Return Value
.closest()	Current element	Up the DOM tree	Zero or one element
.parents()	Parent element	Up the DOM tree	Zero or more elements (in reverse order)

父元素 向上dom树 零或更多元素（以相反顺序）

核心区别在于其起点。 .closest()开始使用当前元素开始搜索，而.parents()>从直接父开始。 两者都穿过DOM树向上穿越，但是.closest()在第一个匹配的祖先停止，而.parents()>继续扎根，收集了所有匹配的祖先。

视觉表示：

>使用示例：.parents()

此代码删除单击按钮的父

元素：<li>

<code class="language-javascript">$('.btn.remove').on('click', _this.cache.$container, function(e) {
    e.preventDefault();
    console.log('remove...');
    $(this).parents('li').first().remove();
});</code>

注意

的方法是必要的，因为.first()可以返回多个元素。 .parents()

>使用

示例： .closest() 这更有效地实现了相同的结果：

<code class="language-javascript">$('.btn.remove').on('click', _this.cache.$container, function(e) {
    e.preventDefault();
    console.log('remove...');
    $(this).closest('li').remove();
});</code>

直接返回第一个匹配的祖先，消除了对

的需求。 如在各种基准中所证明的那样，这通常会提高性能。.closest()> .first()

常见问题（常见问题解答）：

>

<li>主要差异：

从当前元素进行搜索，停在第一次匹配项中； >从父母那里搜索，返回所有匹配。.closest()> .parents()

<li>返回的多个元素：

>最多返回一个； 可以返回多个。.closest() .parents()

><li>使用没有选择器的使用：

没有选择器返回直接父。 .closest()

查找特定祖先：<li>两种方法都接受选择器以靶向特定祖先元素。
没有匹配：<li>如果找不到匹配，则两者都返回一个空的jQuery对象。
案例灵敏度：<li>选择器对案例敏感。

>

链接：<li>>两种方法都允许使用其他jQuery方法链接。

总而言之，为了找到与特定选择器匹配的最近祖先，

通常是其效率和清洁剂语法的首选。 当您需要与所有匹配的祖先元素一起工作时，>很有用。 选择最适合您的特定需求和编码样式的方法。

以上是使用jQuery＆＃x27; $ .closest（）vs $ .parents（）的详细内容。更多信息请关注PHP中文网其他相关文章！