Reputation: 4515
I have a list of elements that I want to style in 3 different ways.
I want every 3rd list item to have the same class throughout the whole list.
For example:
<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>
I can do 2 with :odd/even, but how to do it with 3?
Upvotes: 16
Views: 25044
Reputation: 37813
I recommend something like this:
let i = 0;
$("li").each(function() {
i++;
let newClass = 'A';
if (i % 3 == 1) { newClass = 'B'; }
if (i % 3 == 2) { newClass = 'C'; }
$(this).addClass(newClass);
});
Upvotes: 2
Reputation: 9354
try
$("ul li:nth-child(3n+1)").addClass("A")
$("ul li:nth-child(3n+2)").addClass("B")
$("ul li:nth-child(3n)").addClass("C")
Feel free to consolidate it to make it prettier, but I wanted to expose the selectors.
Upvotes: 45