2009-08-11 4 views
16

У меня есть список элементов, которые я хочу стилизовать тремя разными способами.addClass every nth

Я хочу, чтобы каждый третий элемент списка имел один и тот же класс во всем списке.

Например:

<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 
<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 
<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 

я могу сделать 2 с: четным/нечетным, но как сделать это с 3?

ответ

45

попробовать

$("ul li:nth-child(3n+1)").addClass("A") 
$("ul li:nth-child(3n+2)").addClass("B") 
$("ul li:nth-child(3n)").addClass("C") 

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

+2

Для использования этого рабочего решения: $ ('ul li: nth -child (3n) '). addClass (' each-third-item-class '); – shuckster

+0

@brownstone - см. редактирование, я изменил его, чтобы обратиться к его общей заботе (хотя и с длинной рукой) – Marc

+1

Спасибо Marc. Это было именно то, что я хотел. – davebowker

2

Я рекомендую что-то вроде этого:

var i = 0; 
$("li").each(function() { 
    var newClass = 'A'; 
    if (i % 3 == 1) newClass = 'B'; 
    if (i % 3 == 2) newClass = 'C'; 
    $(this).addClass(newClass); 
}); 
+2

это не работает ... удалите первую строку и добавьте «i» в .... каждый (функция (i) .... – ggzone

Смежные вопросы