Question

说我有以下标记：

<div class="parent">
    <div class="child">
        <div class="grand-child">

我想从.parent开始.grand-child。我可以做以下两种情况之一：

$('.grand-child').parent().parent();
$('.grand-child').closest('.parent');

总的来说，closest()感觉就像是一个更好的方法：

只有一个功能
与.grand-child和.parent

具体来说，由于上面＃2的优点，如果我要将我的标记更改为

<div class="parent">
    <div class="child">
        <div class="nanny">
            <div class="grand-child">

然后我需要添加额外的parent()，但closest()仍可正常使用。

您有没有理由选择parent()或closest()？

Answer 1

你应该使用$('.grand-child').closest('.parent');，因为.parent().parent()强烈地基于你的html结构，如果以后你在其中一个中添加另一个div，那么你将使用parent().parent()

假设您有html：

<div class="parent">
    <div class="child">
        <div class="grand-child-container">
             <div class="grand-child">

现在如果你使用.parent().parent()会发生什么情况，它会给你错误的元素，所以推荐的方法是使用closest()因为它更好。

根据文件：

parent()获取当前匹配元素集中每个元素的父元素，可选择由选择器进行过滤。

closest()对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

差异：

如果您向下滚动一下，您可以通过官方jquery网站看到这两者之间的差异。

对于这两者之间的差异，还有一些更好的答案：

parent vs closest

Difference between jQuery parent(), parents() and closest() functions

性能：

同样表现明智closest()优于parent()，您可以查看Benchmark between closest() and parent()

Answer 2

如果查看代码，.parent()基本上只是DOM调用.parentNode的包装器。它非常快速有效，因为它本质上只是对内置浏览器的一次调用。

https://github.com/jquery/jquery/blob/master/src/traversing.js#L133

.closest(selector)确实更加安全，因为它可以保证您不会过去，或者不会过于简单地停留，并且在您到达目标父母之前停止 - 无论实际情况如何DOM的形状。但它显然也要贵得多。看一下代码：

https://github.com/jquery/jquery/blob/master/src/traversing.js#L63

它根本就是一个循环本质上更昂贵。它每次迭代都会做更多的检查。在一个非常深的DOM中，如果您例如使用.closest来询问＆＃34;这个标签是X的孩子吗？＆＃34;它将整个DOM树循环到body标签而没有其他绑定。如果您在1000个标签深处找到了1000个无意义的循环来找到它。如果你对你调用此标记的位置放置在哪里，那么就会出现同样的错误。

因此，.parent()对于您对结构非常肯定的DOM非常有效。 .closest(selector)适用于不太受信任的DOM，但如果你不知道DOM是什么样的话会有点危险。

jQuery - parent（）vs nearest（）

2 个答案:

根据文件：

差异：

性能：