Divide Ul lists into groups of 3

by DannyEnglander

HTML

<h2>Group 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>


<h2>Group 2</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>

CSS

.new { border-bottom: solid 1px #ddd; padding: 5px; }

h2 {margin-top: 20px; }

JavaScript

$('ul').each(function(){
    var uls = $("li", this);

    for(var i = 0; i < uls.length; i+=3) {

    var lis = $("li", this);

        uls.slice(i, i+3).wrapAll("<ul class='new'></ul>");
    }
});