使用jQuery将大型列表拆分为三个相等的高度列表

Question

我正在寻找关于这个javascript（jQuery）问题的一些建议（我不是前端开发者，所以请耐心等待我;-)）

我有一个大的<ul> ，我需要在三个单独的<ul>拆分，每个都有相同数量的菜单项。 所以，如果我的大<ul>有五个<li> <ul> ，它将如下所示：

Listitem 1           Listitem 3         Listitem5
ListItem 2           Listitem 4

等等

有没有办法在javascript / jQuery中这样做？ :-)

提前致谢。

Answer 1

Css总是最好的，但是如果你必须向后兼容或者由于某些其他原因需要它在单独的列表中。 我为此敲了一个快速的脚本。 它可能会有点优化，因为我把它扔在一起，但做你需要的。

我把它放在jsfiddle这里http://jsfiddle.net/whAyt/8/希望它有所帮助

function breakList(numOfLists, list){
    var listLength = list.find("li").size();
    var numInRow = Math.ceil(listLength / numOfLists);
    for (var i=0;i<numOfLists;i++){
        var listItems = list.find("li").slice(0, numInRow);
        var newList = $('<ul/>').append(listItems);
        $("body").append(newList);
    }
}

breakList(3, $(".list")); 

Answer 2

CSS和div怎么样？

div {
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;
}

更多这里

IE替代列计数和列间隙

Answer 3

仍然只有css：

#theList { width: 100% }

#theList li {
    float: left;
    width: 33%;
}

小提琴

如果要按列排序，则必须以正确的顺序生成<li>节点。