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

Question

我想选择第三个<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>

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

Answer 1

您可以通过使用类选择器和 eq 函数的组合来实现此目的。$('tr.record').eq(-3).addClass('load-next-set').load-next-set {&nbsp; background-color: tomato;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Col 1</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Col 2</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Col 3</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Col 4</th>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody id="tbody">&nbsp; &nbsp; &nbsp; &nbsp; <tr class="record">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info 1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info 2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info 3</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr class="record">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info 4</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr class="record">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info 5</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr class="record">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info 6</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info 7</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr class="record">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info 8</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>info</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody></table>

Answer 2

假设您只将类分配给record一个tr表的元素（如您的示例中）：在香草 javascript 中：var n=3; // examplevar trs = document.getElementsByClassName('record');if(trs.length>=n){&nbsp; &nbsp; var tr = trs[trs.length-n];&nbsp; &nbsp; tr.classList.add("another_class");}