Получите nth-last-child () для <tr>с определенным классом

Question

Я хотел выбрать 3-й последний <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");
}