獲取具有特定 class 的第 nth-last-child()

Question

我想 select 最后第三個<tr>有 class record ，然后添加另一個 class 到它。 例如，我有一個如下表：

 $('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

您可以通過使用 class 選擇器和 eq function 的組合來實現此目的。

 $('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

假設您僅將 class 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");
}