Добавьте класс для нечетных столбцов с eq больше 3 в jQuery

Question

как добавить классы для нечетных столбцов в таблице данных, чей экв больше 3?это код, который я опробовал, и он дает класс tr.Есть ли какой-нибудь изящный способ добиться этого?

$('.dataTable tr').each(function() {
console.log($(this))
if ( $(this).children('td:odd') || $(this).children('td:gt(3)') ) {
$(this).addClass('oddColumn');
// how do I access the td element here ??
}
});

Answer 1

Вы ищете что-то подобное?

$('tr td:nth-child(2n+5)').addClass('c');

Пример: http://jsfiddle.net/ambiguous/AQdY8/

Обратите внимание, что селектор jQuery nth-child соответствует версия CSS :

Запись псевдокласса :nth-child(an+b) представляет элемент, который имеет an+b-1 братьев и сестер перед в дереве документа, для любого положительного целого или нулевого значения n и имеет родительский элемент .

Побочным эффектом этого является то, что он индексирует от 1, а не 0 как другие селекторы jQuery:

Поскольку реализация jQuery :nth-child(n) строго получена из спецификации CSS, значение n является «1-индексированным», что означает, что отсчет начинается с 1.

Answer 2

Я хочу настроить таргетинг на определенные столбцы и изменить стиль.

У меня есть таблица с иконками в первом и последних двух столбцах.Тогда у меня есть переменное количество столбцов данных в середине.В зависимости от ширины таблицы я хочу показать первые 5 или 10 столбцов данных и скрыть остальные.Но мне нужно, чтобы значки отображались постоянно.

<tr>
<td><a href="#" class="icon-magnifyingGlass">View</a></td>
<td class="dataCol">Seq</td>
<td class="dataCol">Code</td>
<td class="dataCol">Date</td>
<td class="dataCol">Comment</td>
<td class="dataCol">Int</td>
<td class="dataCol">Date</td>
<td class="dataCol">User</td>
<td class="dataCol">Seq</td>
<td class="dataCol">Code</td>
<td class="dataCol">Date</td>
<td class="dataCol">Comment</td>
<td class="dataCol">Int</td>
<td class="dataCol">Date</td>
<td class="dataCol">User</td>
<td><a href="#" class="icon-pencil">Edit</a></td>
<td><a href="#" class="icon-x">Delete</a></td>
</tr>

Я пытался использовать селектор nth-child () для нацеливания на конкретные столбцы 1, 2-6, рядом с последним столбцом nth-child (-n-2) и последний столбец (last-child).Однако старые браузеры, такие как IE6, IE7 и IE8, не поддерживают nth-child ().Хотя я использую jquery и moderinzer для поддержки CSS3, у меня это не сработало.

Моя работа заключалась в том, чтобы вручную ставить классы в определенные столбцы, на которые я нацеливался, например class = "dataCol".Затем я смог использовать селектор gt (), чтобы показать первые пять столбцов данных и скрыть остальные, при этом оставив видимыми первые и последние два столбца значков.

$("#example tr").each(function(){
     $(this).find(".dataCol:gt(4)").css("display","none");
     });

В результате я получил 5 столбцов данных и три столбца значков, которые нужно показать, а остальные скрыты.

Спасибо за все сообщения, это было очень полезно.

Answer 3

$('.dataTable tr td:odd').addclass
$('.dataTable tr td:gt(3)').addclass

Хотя я думаю, что классы будут добавлены дважды для gt (3) и нечетного