Я в настоящее время использую этот код для добавления класса к любой строке в моей таблице.
$(".stripeMe tr:even").addClass("alt");
Однако на другой таблице я хотел бы добавить класс к строкам 3,4, 7,8, 11,12 и так далее...
Действительно ли это возможно?
Вам нужно сделать это так:
$(".stripeMe tr:nth-child(4n)").add(".stripeMe tr:nth-child(4n-1)").addClass("alt");
//or...
$("tr:nth-child(4n), tr:nth-child(4n-1)", ".stripeMe").addClass("alt");
Вы можете увидеть, как это работает здесь .
Используя это:
$(".stripeMe tr:nth-child(4n), .stripeMe tr:nth-child(4n-1)").addClass("alt");
получает разные результаты (а именно, в webkit, возможно, в других).
Вы можете использовать функцию filter
для фильтрации набора любым удобным для вас способом:
$(".stripeMe tr")
.filter(function(i){ return (i % 4) >= 2; })
.addClass("alt");
Это позволит сохранить элементы с индексом 2, 3, 6, 7, 10, 11 и так далее. Обратите внимание, что индекс основан на нуле, поэтому третий ряд будет иметь индекс 2.
С селектором `:nth-child`: http://api.jquery.com/nth-child-selector/
$(".stripeMe tr:nth-child(4n), .stripeMe tr:nth-child(4n-1)").addClass("alt");
Я применил другой подход к этой проблеме, используя цикл for и метод .eq ().
var a = 2; // start from 2 because eq() counts from 0
var b = 3; // start from 3 because eq() counts from 0
var total = $('.stripeMe td').length;
for (i = 0; i <= total; i++){
if (i == a){
$('.stripeMe tr:eq('+a+')').css('background', 'red');
a+=4;
}
else if (i == b){
$('.stripeMe tr:eq('+b+')').css('background', 'blue');
b+=4;
}
};