获取具有特定类的 <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 {

  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 2

假设您只将类分配给record一个tr表的元素（如您的示例中）：

在香草 javascript 中：

var n=3; // example

var trs = document.getElementsByClassName('record');

if(trs.length>=n){

    var tr = trs[trs.length-n];

    tr.classList.add("another_class");

}