CODEWITHSUNDEEP
jquerycssloops
Tom Shafer
Tom Shafer

Reputation: 1

apply different css class every 3 ul with jquery

I have a lot of li's and I am looping through them and wrapping in groups of 5 but I need to apply a different class to every 3 groups so it looks like this 

<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>

I am using this to group them 

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

Upvotes: 0

Views: 585

Answers (2)

tjm
tjm

Reputation: 7550

Can you just do ..

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>');  
}

That will name them the other way around .. class2, class1, class0. To get them as class1, class2, class3. You can just change (i%3) to (3-(i%3)).

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382776

apply different css class every 3 ul with jquery

You can use the nth-child selector like this:

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

That will add class to every third <li> under the element with class leftHover. You can off course change the argument of 3 to whatever you wish for your requirements.

Upvotes: 4

Related Questions