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

Question

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

我有一个大的<ul>,我需要分成三个单独的<ul>s,每个都有相同数量的menuitems.所以,如果<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"));