jQuery: как выделить последние N столбцов каждой строки в таблице?

#jquery #jquery-selectors

#jquery #jquery-селекторы

Вопрос:

У меня есть таблица с 6 столбцами. Я хочу запустить функцию для последних 3 столбцов каждой строки (исключая строку заголовка). У меня есть следующий селектор, который работает:

 $('table.listviewtable > tbody > tr:gt(0)').find('td:gt(2)')
    .each(function () { runMyFunction($(this)); });

Есть ли способ сделать все это в одном селекторе (т.е. без промежуточного find )?

Обновить:

Я пытался

 $('table.listviewtable > tbody > tr:gt(0) td:gt(2)')

 $('table.listviewtable > tbody > tr:gt(0) > td:gt(2)')

но они не сработали. Они вернули 4-й, 5-й и 6-й столбцы 2-й строки и все столбцы всех последующих строк.

1. td:gt(2) не работает, потому что исключает первые 3 элемента TD из всего набора элементов TD, а не первые 3 элемента TD из каждой строки.

2. @Sime: да, я это понял. Именно тогда я ввел промежуточную функцию find(), чтобы заставить работать исходную версию. И поскольку существует большая разница между индексом и дочерним элементом, я восстановил часть заголовка вопроса. Для дальнейшего использования я хочу, чтобы было ясно, что мне нужны столбцы каждой строки (дочерние элементы), а не последние столбцы последней строки в таблице (индекс).

Ответ №1:

Поехали:

 $('table.listviewtable td:nth-child(n 4)')

Живая демонстрация: http://jsfiddle.net/simevidas/qJ3tP/1

(Я предполагаю, что вы используете TH-элементы для ячеек заголовка.)

1. ДА! Это именно так. Я мог сказать это еще до того, как протестировал это. Я посмотрел на n-й дочерний элемент, но все примеры показывали множители n. Никогда не приходило в голову попробовать сложение. Должно быть, в пятницу уже конец рабочего дня. Спасибо!

2. @Rich В спецификации приведены отличные примеры: w3.org/TR/css3-selectors/#nth-child-pseudo

3.Если таблица использует <TD> элементы для строки заголовка, используйте $('table.listviewtable tr:not(:first-child) td:nth-child(n 4)') jsfiddle.net/CeRvV/2

Ответ №2:

Правило

Общее правило для получения X последних TD из TR является:

 $('#tbl tr td:nth-last-child(-n X)');

Пример

 // Example for the last 3 paragraphs in some section:
$('#my_section p:nth-last-child(-n 3)');

// It's exactly the same as:
$('#my_section p:nth-last-child(3-n)');

ДЕМОНСТРАЦИЯ

 <!-- CSS -->
<style>
  td {
    border: solid 1px #999;
    padding: 2px;
  }
</style>

<!-- HTML -->
<p>Last 3 cells made gray using jQuery</p>
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
  </tr>
</table>

<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('table tr td:nth-last-child(-n 3)').css('background', '#CCC');
  });
</script>

Спасибо

http://css-tricks.com/useful-nth-child-recipies/

Ответ №3:

 $('table.listviewtable > tbody > tr td:gt(2)')

Ответ №4:

Самый простой и очевидный селектор будет:

 $('tr').each(
function(){
    $(this).find('td:gt(2)').css('background-color','#ffa');
});

JS Fiddle.

Отредактировано, потому что я идиот и упустил из виду очевидный недостаток в первом предложении. Кстати, я предполагаю правильную разметку, используя th для строк заголовка. Однако вы могли бы изменить селектор на:

  $('tbody tr')

Чтобы обойти это, если вы не используете th элементы.

Ответ №5:

как насчет

 $('td:gt(2)', 'table.litviewtable')

конечно, если вы используете th в заголовке.