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

What's the difference between these? Is one more efficient than the other? I'm a little bit confused to why they both exist. Say I have this markup:

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

<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>

From the <span> tags I could use either $(this).closest('tr'); or $(this).parents('tr'); to access the parent/closest <tr> tag.

从标签我可以使用$(this).closest('tr');或$(this).parents('tr');访问父/最近的标签。

3 个解决方案

#1

parent returns the immediate parents (one for each element in the caller object) or nothing if the parent does not match the selector. closest returns the closest ancestor matching ancestor for each element (which can be the original element). The third similar function, parents, returns all matching ancestors (not including the element itself).

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

Generally, closest is more resistant to refactoring the HTML code than parent, if you choose the selector sensibly.

通常,如果您明智地选择选择器,则最接近HTML对代码的重构比父代更具抵抗力。

#2

(Note: The question was edited the day after being asked, changing the question from about parent to being about parents [note the plural]. Which kind of makes a difference!)

(注意:问题在被问到的第二天被编辑,将问题从关于父母改为关于父母[注意复数]。哪种有所不同!)

Re your original question about parent (singular) vs. closest: parent only ever goes one level up. closest starts with the current element (not just the parent) and keeps searching through ancestors until it finds a match (or runs out of ancestors).

关于父(单数)与最接近的原始问题:父母只有一级上升。最接近当前元素(不仅仅是父元素),并继续搜索祖先,直到找到匹配(或用完祖先)。

Re your updated question about parents (plural) vs. closest: There are two differences:

关于父母(复数)与最接近的最新问题:有两点不同:

Whether the current element is considered (it is with closest, it is not with parents).

是否考虑当前元素(它是最接近的,它不是父母)。
Whether the search stops with the first match (it does with closest, it doesn't with parents).

搜索是否在第一次匹配时停止(与最近匹配,但不与父项匹配)。

From your original question:

从你原来的问题:

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

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

No, actually. $(this).parent('tr'); would return an empty jQuery object, because the parent of the span doesn't match the selector.

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

From your updated question:

从您更新的问题:

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

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

You could, provided that your tr isn't also within another tr (e.g., a table containing a table). If that's the case, you'll get the same result. But if you have a table within a table, with parents you'll get multiple trs (all of the ancestor tr elements).

如果您的tr不在另一个tr(例如,包含表的表)中,您可以。如果是这样的话,你会得到相同的结果。但是如果你在一个表中有一个表,与父母一起你会得到多个trs(所有的祖先tr元素)。

Consider this structure:

考虑这个结构:

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

If we hook click on the span, this is what we get back from the three relevant methods:

如果我们挂钩点击跨度,这就是我们从三个相关方法中得到的结果:

$(this).parent('div') - Empty jQuery object, the parent of the span is not a div.

$(this).parent('div') - 空的jQuery对象,span的父级不是div。

$(this).parents('div') - jQuery object with two divs in it, the "inner" and "wrapper" divs (in that order).

$(this).parents('div') - jQuery对象中包含两个div,“inner”和“wrapper”div(按此顺序)。

$(this).closest('div') - jQuery object with one div in it, the "inner" one.

$(this).closest('div') - jQuery对象,其中包含一个div,即“内部”div。

Here's the result if we hook click on the span and use span as the selector:

如果我们挂钩单击span并使用span作为选择器,则结果如下:

$(this).parent('span') - Empty jQuery object, the parent of the span is not a span.

$(this).parent('span') - 空jQuery对象,span的父级不是span。

$(this).parents('span') - Empty jQuery object, the span has no ancestor spans.

$(this).parents('span') - 空的jQuery对象,跨度没有祖先跨度。

$(this).closest('span') - jQuery object with the span that was clicked.

$(this).closest('span') - 带有单击范围的jQuery对象。

#3

.parent() only goes up one level, while closest() includes the current element, and all parents.

.parent()只上升一级,而nearest()包括当前元素和所有父级。

Example (selecting from the bottom div, x = matched elements):

示例(从底部div中选择,x =匹配的元素):

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

#1