javascript - 使用 jQuery 将大列表拆分为三个等高的列表

Question

我正在寻找有关此 javascript (jQuery) 问题的一些建议（我不是前端开发人员，所以请多多包涵；-)）

我有一个大<ul>的，我需要分成三个单独<ul>的 s，每个中的菜单项数量相等。<li>因此，如果我的 large 中有五个s <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 替代 Column-Count & Column-Gap

Answer 3

仍然只有css：

#theList { width: 100% }

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

小提琴

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