Javascript jQuery-父对象（）与最近对象（）的比较

假设我有以下标记：

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

总的来说，

closest（）

感觉是一种更好的方法，因为：

只有一个功能

它与

.grand child

和

.parent

之间的其他div无关

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

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

然后我需要添加一个额外的

parent（）

那么，您为什么选择
parent（）
或
closest（）
？
您应该使用
$（'.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（）
会出现什么情况呢？它会给您错误的元素，所以建议您使用
最接近的（）
，因为这样更好

根据文件：
获取当前匹配元素集中每个元素的父元素（可选地由选择器筛选）

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

差异：
如果您向下滚动一点，您可以在官方jquery网站上看到这两者之间的差异

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



性能：
另外，性能方面的
closest（）
优于
parent（）
，如果查看代码，
.parent（）
基本上只是DOM调用的包装。它非常快速高效，因为它本质上是对内置浏览器的一次调用


.closest（selector）
确实安全得多，因为它保证了您不会在到达预期父对象之前循环，或者循环过短并停止，而不管DOM的实际形状如何。但它显然也要贵得多。看看代码：


这是一个循环，本质上更昂贵。它还在每次迭代中做更多的检查。在非常深的DOM中，例如，如果您使用.closest来询问“this tag是X的子标记吗？”它会将整个DOM树循环到body标记，而没有其他绑定。如果你有1000个标签，那么要找到它就需要1000个毫无意义的循环。如果您只是错误地确定了要调用的标记的位置，也会发生同样的情况

因此，
.parent（）
对于对结构非常确定的DOM来说是非常高效的
.closest（selector）
适用于不太受信任的DOM，但如果您不知道DOM的外观，则会有点危险。
可能您必须访问元素的父级，而您将不关心（甚至不知道）它是什么。然后您就可以确切地了解
.parent（）
的用法在jquery中使用
parent（）
和
closest（）
函数有很多不同之处和需要。这取决于您实际需要什么。。查看它们之间的差异，您的应用程序似乎非常适合
最近的
。但是，如果您只想升级一级，那么
parent
将是最有用的。
parent
的优点是您不需要使用标记来查找它。这完全取决于你的要求。很多情况下，父母是合适的。假设您不知道它是什么类或ID，甚至不知道它是什么标记，但您知道您想要的是实际的父级
closest（）
对于特定目标更有效，尤其是当不确定目标距离有多远时，请注意
closest
实际上检查元素本身。感谢您提供的信息，但这正是我在描述中所说的，为什么我要使用
最近的（）
而不是
父级（）
。因为
最近的（）
独立于DOM结构和更改，其性能也比
父级（）
这里的父级与最近的语句不正确。该基准链接到.parents（）与.closest（）的基准。parents（）与.parent（）非常不同。parent（）是一条指令，速度很快。parents（）完全做其他事情，而且非常昂贵-它获取整个DOM链上的所有父级，而不仅仅是直接父级：
。parents（）
比
。closest（）
快得多，后者比
。parents（）快得多
您能否将基准测试显示为对您的应用程序的支持statement@ChrisMoschini我已经附加了正确的基准测试，
最近的（）
比
父级（）快。
<div class="parent">
    <div class="child">
        <div class="grand-child-container">
             <div class="grand-child">