применять разные классы CSS каждые 3 миль с помощью jquery

Question

У меня много li, и я перебираю их и объединяюсь в группы по 5, но мне нужно применить разные классы к каждой 3 группе, чтобы это выглядело так

<ul class="class1"><li></li><li></li> <li></li><li></li><li></li></ul>
<ul class="class2"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class3"><li></li><li></li><li></li><li></li><li></li></ul>  

<ul class="class1"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class2"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class3"><li></li><li></li><li></li><li></li><li></li></ul>    

<ul class="class1"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class2"><li></li><li></li><li></li><li></li><li></li></ul>  
<ul class="class3"><li></li><li></li><li></li><li></li><li></li></ul>  

Я использую это, чтобы сгруппировать их

var lis = $(".leftHover ul li");  
for(var i = 0; i < lis.length; i+=5) { 
  is.slice(i, i+5).wrapAll(<ul></ul>);  
}

Answer 1

применять разные классы CSS каждые 3 ul с jquery

Вы можете использовать селектор nth-child следующим образом:

$(".leftHover ul li:nth-child(3n)").addClass('className');

Это добавит класс к каждый третий <li> под элементом с классом leftHover. Конечно, вы можете изменить аргумент 3 на любой другой, который вы пожелаете.

Answer 2

Можете ли вы просто сделать ..

var lis = $(".leftHover ul li");  
for(var i = 0; i < lis.length; i+=5) { 
  lis.slice(i, i+5).wrapAll('<ul class="class' + (i%3) + '"></ul>');  
}

Это назовет их наоборот .. class2, class1, class0. Чтобы получить их как class1, class2, class3. Вы можете просто изменить (i%3) на (3-(i%3)).