Самый эффективный способ разделить список на одинаковые по размеру подсписки, используя jquery

Question

Используя jQuery, какой самый эффективный способ разбить список

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

на несколько подсписков

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

, где каждый подсписок (кроме, возможно, последнего) имеетп предметов.

Я хочу свести к минимуму запросы и манипуляции с DOM и перемещать исходные элементы DOM в новые списки, а не клонировать их.

Answer 1

Вот мой :) Ответ endyourif, приведенный выше, является более кратким, но это может быть несколько более эффективным, поскольку сначала он собирает все фрагменты, а затем выбрасывает их в дом с одной заменой.

var desiredNoOfCols = 3;
var $parent = $("<div/>")
for(var i=1;i<=desiredNoOfCols ; i++){
    $parent.append("<ul class='column" + i + "'> </ul>")
}

$("#column")
    .children()
        .each(function(index, elem){
           $parent
             .children(".column" + ((index+1) % desiredNoOfCols + 1))
                .append($(elem).detach())
         })
    .end()
    .replaceWith($parent.children())

Answer 2

Кажется, это работает хорошо, но не уверен, насколько это эффективно:

<ul id="column">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

<div id="columns"></div>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script>
    $(document).ready( function() {
        var total = $("#column li").size();
        console.log(total);
        var count = 2;
        var column = 0;
        for (var i = 0; i < total; i += count) {
            column++;
            $("#columns").append('<ul id="column' + column + '"></ul>');
            $("#column" + column).html($("#column li").splice(0, count));
        }
        $("#column").remove();
    });
</script>

Answer 3

Другая возможность - взглянуть на существующий плагин - многостолбцовые списки .Автор плагина показывает код - вы можете взглянуть на используемую там технику (комбинация CSS и разбивка на меньшие списки).

Answer 4

Вот что я придумала до сих пор:

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"));