Separate unordered List into rows

by DannyEnglander

HTML

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

<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

ul.data-row {
    clear:both;
    float:none;
    display: block;   
}

ul li {
    float: left; 
}

ul.new {
    border-bottom 1px solid #333;
}

JavaScript

var uls = $("ul > li").each(function() {
    for(var i = 0; i < uls.length; i+=3) {
    uls.slice(i, i+3).wrapAll("<ul class='new'></ul>");
    }
});


//$('ul').addClass("data-row");