Question

Using jQuery, what’s the most efficient way to split a list

 <ul class="columnar"><li></li>... <li></li></ul> 

into several sublists

<ul class="column1"><li></li>... <li></li></ul>
<ul class="column2"><li></li>... <li></li></ul> 

where each sublist (apart from, possibly, the last one) has n items.

I want to keep querying and manipulation of the DOM to a minimum and move the original DOM elements into the new lists rather than cloning them.

Answer 1

This is what I’ve come up with so far:

var $ul = $(this),
    items = $ul.children("li"),
    itemCount = items.length,
    colHeight = Math.ceil(itemCount/3); 

// create temp DOM node to place the new lists in
var temp = $("<div></div>"),
    newUL,
    i = 1;

while($ul.children("li").length > colHeight) {
    newUL = $("<ul class=\"columns\"></ul>");
    newUL.append(items.filter(":gt(" + ((i * colHeight)-1) + ")").filter(":lt(" + colHeight + ")"));
    i++;
    temp.append(newUL.addClass("column" + i));
}
temp.children().insertAfter($ul.attr("class","columns column1"));