jQuery、HTML 表格和 .last()

Question

我在看一本关于jQuery和HTML的书，有一点看不懂，找了一个半小时，网上也找不到答案，所以直接在这里问.所以我的页面上有一个表格：

<table>
  <thead>
    <th>Nom</th>
    <th>T&eacute;l&eacute;phone</th>
    <th>Courriel</th>
    <th>Compagnie</th>
    <td>Dernier contact</td>
  </thead>

  <tbody>
    <tr>
      <td>William Smith</td>
      <td>(555) 642-7371</td>
      <td>william@testing.com</td>
      <td>Acme Industries</td>
      <td>
        <time datetime="2014-10-21">2014-10-21</time>
        <div class="overlay">These are my notes for William</div>
      </td>
    </tr>
    <tr>
      <td>Bob Morris</td>
      <td>(555) 748-4465</td>
      <td>Bob@moretesting.com</td>
      <td>ABC Corp</td>
      <td>
        <time datetime="2015/01/01">2015/01/01</time>
        <div class="overlay">Notes pour Bob</div>
      </td>
    </tr>
    <tr>
      <td>Ted Mosus</td>
      <td>(555) 484-9835</td>
      <td>Ted@SomeEmail.com</td>
      <td>Tada Inc.</td>
      <td>
        <time datetime="2016/05/21">2016/05/21</time>
        <div class="overlay">Ne pas appeler avant 10:00 AM</div>
      </td>
    </tr>
    <tr>
      <td>Yvan Doc</td>
      <td>(555) 258-7946</td>
      <td>yvan@doc.com</td>
      <td>ABC Corp</td>
      <td>
        <time datetime="2015/07/18">2015/07/18</time>
        <div class="overlay">Non non ce n'est pas un docteur!</div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5">4 contacts displayed</td>
    </tr>
  </tfoot>
  <caption>Contact des ventes</caption>
</table>

当我在 Chrome 中打开控制台时，我输入以下命令

$('time').siblings('.overlay').parents('tr').last();

现在我希望它会返回“Yvan Doc”行，这是我表中的最后一行，但不，它会返回“William Smith”行，当我将 .last() 更改为 .first ()，它返回给我的是 'Yvan Doc' 而不是 'William Smith'。

有人可以向我解释一下为什么桌子似乎是倒置的吗？

Answer 1

原因实际上在于.parents() 而不是.last()。如果您阅读.parents() 的文档，它会指出（强调我的）：

当原始集合中有多个 DOM 元素时，结果集合 也将与原始元素的顺序相反 已删除重复项。

您可能对使用 .closest() 更感兴趣，当使用 $('time').siblings('.overlay').closest('tr').last() 时将返回 Yvan Doc 行。

Answer 2

您可以将.closest() 与.find() 和.first() 一起使用：

$('time').closest('tbody').find('tr').first();

Answer 3

你面临的问题是你从一个多重选择器开始（选择所有带有“时间”标签的元素），然后获取所有的兄弟姐妹，然后获取他们所有的父母，然后尝试找到最后一个.您的代码在使用返回多个元素的选择器时尝试查找单个项目。

您应该抓住<tbody> 元素并使用以下方法获取它的最后一个子元素<tr>：

$('tbody tr').last();

如果您的页面上有多个 <tbody>，请为其提供一个唯一 ID 并按如下方式访问它：

$('#tbody-name:last-child');