Currently, I have a large number of li elements that I am iterating through and grouping in sets of 5. However, I need to assign a unique class to every third group in order to achieve the following structure:
<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 have written a script using jQuery to group these elements as desired:
var lis = $(".leftHover ul li");
for(var i = 0; i < lis.length; i += 5) {
lis.slice(i, i + 5).wrapAll("<ul></ul>");
}