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

Question

I wanted to select the 3rd last <tr> which has the class record and then add another class to it. So for example, I have a table like below:

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

The options that I have tried don't seem to be working. Is there another way to do it?

Answer 1

You can achieve this by using a combination of class selector and the 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

Assuming that you only assign the class record to tr elements of one table (like in your example):

In vanilla 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");
}