jQuery - 父（）与最近（）答案

【问题标题】：jQuery - parent() vs closest()jQuery - 父（）与最近（）
【发布时间】：2014-07-30 00:34:21
【问题描述】：

假设我有以下标记：

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

我想从.grand-child 开始获得.parent。我可以做以下两个之一：

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

总的来说，closest() 感觉是一种更好的方法，因为：

只有一个功能
与.grand-child和.parent之间的其他div无关

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

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

然后我需要添加一个额外的parent() 但closest() 仍然可以正常工作。

那么你有什么理由选择parent() 或closest()？

【问题讨论】：

也许你必须访问元素的父元素，而你不会关心（甚至不知道）它是什么。那你就来看看.parent()的用法
在jquery中使用parent()和closest()函数有很多不同和需求。这取决于你的实际需要..看看他们之间的区别here
看来您的应用程序非常适合closest。但是，例如，如果您只想升级一级，那么parent 将是最有用的。 parent 的优点是不需要标签就能找到它。这一切都取决于您的要求。
父母适合的很多情况。假设您不知道它是什么类或 ID，甚至不知道标签，但您知道您想要实际的父级？ closest() 对特定目标更有效，尤其是在不确定它们有多远时
请注意closest 实际上会检查元素本身。 jsfiddle.net/tarabyte/A7ngQ

标签： javascript jquery

【解决方案1】：

您应该使用$('.grand-child').closest('.parent');，因为.parent().parent() 强烈基于您的html 结构，如果将来您在其中一个div 中添加另一个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()

【讨论】：

感谢您提供信息，但这正是我在描述中所说的为什么我要使用 closest() 而不是 parent()。
因为closest()独立于DOM结构和变化，性能也优于parent()
这里的父级与最接近的语句不正确。基准链接到 .parents() 与 .closest() 的基准。 .parents() 与 .parent() 非常不同。 .parent() 是一条指令并且速度很快。 .parents() 完全做其他事情，而且非常昂贵 - 它让所有父母都进入整个 DOM 链，而不仅仅是直接父母：api.jquery.com/parents .parent() 比 .closest() 快得多，这比 @ 快987654341@
您能否将基准作为对您声明的支持
@ChrisMoschini 我已经附加了正确的基准，但closest() 比parent() 快

【解决方案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 来询问“这个标签是 X 的子标签吗？”它将整个 DOM 树循环到没有其他绑定的 body 标记。如果您有 1000 个标签深度，那么需要 1000 个毫无意义的循环才能找到它。如果您对所调用的标签的放置位置有误，也会发生同样的情况。

所以，.parent() 对于结构非常确定的 DOM 非常有效。 .closest(selector) 适用于不太受信任的 DOM，尽管如果您不知道 DOM 长什么样子，这有点危险。

【讨论】：