Question

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

我有一个大的<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 Alternative to Column-Count & Column-Gap

Answer 3

仅限css：

#theList { width: 100% }

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

fiddle

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

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

3 个答案: