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

Question

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

我有一个大的<ul>我需要分成三个独立的<ul>每个菜单项的数量相等。所以如果我有五个 <li> 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"));