获取具有特定类的 <tr> 的 nth-last-child()

【问题标题】：Get nth-last-child() for a <tr> with a particular class获取具有特定类的 <tr> 的 nth-last-child()
【发布时间】：2020-10-07 17:30:07
【问题描述】：

我想选择倒数第三个<tr>，它的类为record，然后添加另一个类。例如，我有一个如下表：

$('tr.record:nth-last-child(3)').addClass('load-next-set');
$('.record:nth-last-child(3)').addClass('load-next-set');

.load-next-set {
  background-color: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
      	</tr>
    </thead>
    <tbody id="tbody">
      	<tr class="record">
      	  	<td>info 1</td>
      	  	<td>info</td>
      	  	<td>info</td>
      	  	<td>info</td>
      	</tr>
      	<tr>
        	<td>info 2</td>
        	<td>info</td>
        	<td>info</td>
        	<td>info</td>
      	</tr>
      	<tr>
        	<td>info 3</td>
        	<td>info</td>
        	<td>info</td>
        	<td>info</td>
      	</tr>
      	<tr class="record">
        	<td>info 4</td>
        	<td>info</td>
        	<td>info</td>
        	<td>info</td>
      	</tr>
      	<tr class="record">
        	<td>info 5</td>
        	<td>info</td>
        	<td>info</td>
        	<td>info</td>
      	</tr>
      	<tr class="record">
        	<td>info 6</td>
        	<td>info</td>
        	<td>info</td>
        	<td>info</td>
      	</tr>
      	<tr>
        	<td>info 7</td>
        	<td>info</td>
        	<td>info</td>
        	<td>info</td>
      	</tr>
      	<tr class="record">
        	<td>info 8</td>
        	<td>info</td>
        	<td>info</td>
        	<td>info</td>
      	</tr>
    </tbody>
</table>

我尝试过的选项似乎不起作用。还有其他方法吗？

【问题讨论】：

• 只有一组tr 元素吗？或者可以有多个表或 tbodies？
• @Lisa nth-last-child index 从 0 开始。使用您尝试过的所有选项，index=4。例如： $('tr.record:nth-last-child(4)').addClass('load-next-set') 不错的尝试！
• @slappy 到目前为止，只有一个 <tbody>。
• @Ariela 这是否意味着我应该选择 index = 2，因为 0、1、2 和 2nd 是倒数第三个？但是，这仍然没有加载正确的
• @Ariela，实际上第 nth-last-child 索引从 1 开始：developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child。 $('tr.record:nth-last-child(4)').addClass('load-next-set') 给你正确的行的原因是因为倒数第三个<tr> 和record 也是倒数第四行。在这种情况下，tr.record 的工作方式与仅将 tr 作为选择标准时的工作方式相同。同样，如果索引从 0 开始，倒数第三行不是 index=2 而不是 4 吗？