13

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

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

4

3 回答 3

18

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

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

关于（复数）vs .的更新问题：有两个区别：parentsclosest

  1. 是否考虑当前元素（它是 with closest，它不是 with 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')- 包含两个 s 的jQuery 对象div，“内部”和“包装”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 对象。
于 2012-01-23T17:35:17.907 回答
5

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

通常，如果您明智地选择选择器，则它closest比 更抵制重构 HTML 代码。parent

于 2012-01-23T17:36:50.453 回答
1

.parent()只上升一级，同时closest()包括当前元素和所有父元素。

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

             parent()  parent('body')   .closest('div')  .parents('div')
body     
   div                                                       x
      div       x        <nothing>                           x
this-->   div                                x
于 2012-01-23T17:35:12.683 回答