jQuery-parent（）与最近的（）

Question

说我有以下标记：

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

我想从这里.parent开始.grand-child。我可以执行以下两个操作之一：

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

总体而言，closest()由于以下原因，感觉是更好的方法：

具体来说，由于上述＃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（）获取当前匹配元素集中每个元素的父元素，可以选择通过选择器进行过滤。

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

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

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

在性能方面closest()也比更好parent()，您可以检查最近（）和父（）之间的基准