slice elements

by Pragnesh Chauhan

HTML

<ul class='left'>
    <li><a href="#">category 1</a></li>
    <li><a href="#">category 2</a></li>
    <li><a href="#">category 3</a></li>
    <li><a href="#">category 4</a></li>
    <li><a href="#">category 5</a></li>
    <li><a href="#">category 6</a></li>
    <li><a href="#">category 7</a></li>
    <li><a href="#">category 8</a></li>
    <li><a href="#">category 9</a></li>
    <li><a href="#">category 10</a></li>
    <li><a href="#">category 11</a></li>
    <li><a href="#">category 12</a></li>
    </ul>

CSS

.left{
    float: left;
    width: 150px;
}

JavaScript

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