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>

其中每个子列表（除了可能是最后一个子列表）都有n个项目。

我希望将DOM的查询和操作保持在最低限度，并将原始DOM元素移动到新列表中，而不是克隆它们。

Answer 1

这是我到目前为止所提出的：

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

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

另一种可能性是查看现有的插件 - multi column lists。插件的作者显示了代码 - 你可以看一下那里使用的技术（CSS组合并拆分成较小的列表）。

Answer 4

这是我的:)上面的endyourif的响应更简洁，但这可能会稍微提高效率，因为它首先组装所有片段，然后通过单个替换将它们抛出到dom中。

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())

使用jquery将列表拆分为相同大小的子列表的最有效方法

4 个答案: