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

Answer 1

(注意:问题在提出后的第二天进行了编辑，将问题从关于 parent 更改为关于 parents [注意复数]。哪一种会有所不同!)

回复您关于 parent 的原始问题(单数)与closest : parent 只会上升一级。 closest 从当前元素(不仅仅是父元素)开始，并不断搜索祖先元素，直到找到匹配项(或耗尽祖先元素)。

回复您关于 parents 的更新问题 (复数)与closest :有两个区别:

1. 是否考虑当前元素(带有 closest ，不带有 parents )。

2. 搜索是否在第一个匹配项处停止(对于 closest 则停止，对于 parents 则不停止)。

来自您的原始问题:

From the tags I could use either $(this).closest('tr'); or $(this).parent('tr');

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

根据您的更新问题:

From the tags I could use either $(this).closest('tr'); or $(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>

如果我们 Hook click关于span ，这是我们从三个相关方法返回的结果:

• $(this).parent('div') - 空 jQuery 对象，span 的父对象不是div .
• $(this).parents('div') - 带有 two 的 jQuery 对象 div其中，“内部”和“包装”div(按顺序)。
• $(this).closest('div') - 带有 one 的 jQuery 对象 div其中，“内在”的。

这是如果我们 Hook click 的结果关于span并使用span作为选择器:

• $(this).parent('span') - 空 jQuery 对象，span 的父对象不是span .
• $(this).parents('span') - 空 jQuery 对象，span无祖span
• $(this).closest('span') - 带有 span 的 jQuery 对象已被点击。