.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[注意复数].哪种情况有所不同!)

关于(奇异)与你的原始问题:只有一个级别.从当前元素(不仅仅是父元素)开始,并继续搜索祖先,直到找到匹配(或用完祖先).parentclosestparentclosest

关于(复数)与你的最新问题:有两点不同:parentsclosest

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')- 带有两个 div s的jQuery对象,"内部"和"包装器"div(按此顺序).
• $(this).closest('div')- jQuery对象,其中 包含一个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则更难以重构HTML代码parent.