.closest() 和 .parents('selector') 有什么区别？

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> 标签我可以使用either $(this).closest('tr'); 或$(this).parents('tr'); 来访问父/最近的<tr> 标签。

Answer 1

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

关于parent（单数）与closest 的原始问题：parent 只会上升一级。 closest 从当前元素（不仅仅是父元素）开始并不断搜索祖先元素，直到找到匹配项（或用完祖先元素）。

关于parents（复数）与closest的更新问题：有两个区别：

1. 是否考虑当前元素（带closest，不带parents）。

2. 搜索是否在第一个匹配时停止（closest 会停止，parents 不会）。

来自您的原始问题：

从标签中我可以使用 $(this).closest('tr');或 $(this).parent('tr');

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

来自您的更新问题：

从标签中我可以使用 $(this).closest('tr');或 $(this).parents('tr');

您可以，提供您的 tr 不在另一个 tr 中（例如，包含表格的表格）。如果是这种情况，您将得到相同的结果。但是，如果您在一个表中有一个表，使用parents，您将获得多个trs（所有祖先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') - jQuery 对象，其中包含 两个 divs，“内部”和“包装”div（按此顺序）。
• $(this).closest('div') - jQuery 对象，其中包含 one div，“内部”之一。

如果我们将click 钩在span 上并使用span 作为选择器，结果如下：

• $(this).parent('span') - 空 jQuery 对象，span 的父级不是 span。
• $(this).parents('span') - 空 jQuery 对象，span 没有祖先 spans。
• $(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