Question

这些有什么区别？一个比另一个更有效吗？我有点困惑他们为什么都存在。说我有这个标记：

<table>
    <tr>
        <td>...</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
    <tr>
        <td>...</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
    <tr>
        <td>..</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
</table>

在<span>代码中，我可以使用 $(this).closest('tr');或$(this).parents('tr');来访问父/最近的<tr>代码。

Answer 1

（注意：问题在被询问后的第二天进行了编辑，将问题从约parent更改为约parents [注意复数]。哪种情况有所不同！）

重新提出关于parent（单数）与closest的原始问题：parent只能提升一级。 closest以当前元素（不仅仅是父元素）开头，并继续搜索祖先，直到找到匹配（或用完祖先）。

重新提交有关parents（复数）与closest的最新问题：有两点不同：

是否考虑了当前元素（它是closest，而不是parents）。
搜索是否会因第一次匹配而停止（与closest匹配，而不是parents）。

来自原始问题：

从标签我可以使用$（this）.closest（'tr'）;或$（this）.parent（'tr'）;

不，实际上。 $(this).parent('tr');将返回一个空的jQuery对象，因为span的父级与选择器不匹配。

从更新的问题：

从标签我可以使用$（this）.closest（'tr'）;或$（this）.parents（'tr'）;

您可以提供，tr也不在另一个tr内（例如，包含表格的表格）。如果是这样的话，你会得到相同的结果。但如果您在表格中有一个表格，parents您将获得多个tr s（所有的祖先tr元素）。

考虑这个结构：

<div class="wrapper">
  <div class="inner">
    <p>Testing <span>1 2 3</span></p>
  </div>
</div>

如果我们在click上挂钩span，这就是我们从三个相关方法中得到的结果：

$(this).parent('div') - 空jQuery对象，span的父级不是div。
$(this).parents('div') - 包含两个 div的jQuery对象，“内部”和“包装”div（按此顺序）。
$(this).closest('div') - jQuery对象中包含一个 div，即“内部”对象。

如果我们在click上挂钩span并使用span作为选择器，则会产生以下结果：

$(this).parent('span') - 空jQuery对象，span的父级不是span。
$(this).parents('span') - 空jQuery对象，span没有祖先span。
$(this).closest('span') - 点击了span的jQuery对象。

Answer 2

parent返回直接父项（一个用于调用者对象中的每个元素），如果父项与选择器不匹配，则返回任何内容。 closest返回与每个元素（可以是原始元素）的祖先匹配的最近祖先。第三个类似的函数parents返回所有匹配的祖先（不包括元素本身）。

通常情况下，closest比parent更能抵制重构HTML代码，如果您明智地选择了选择器。

Answer 3

.parent()仅上升一级，而closest()包含当前元素和所有父级。

示例（从底部选择div，x =匹配的元素）：

             parent()  parent('body')   .closest('div')  .parents('div')
body     
   div                                                       x
      div       x        <nothing>                           x
this-->   div                                x

.closest（）和.parents（'selector'）之间有什么区别？

3 个答案: