1

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

我有一个大<ul>的,我需要分成三个单独<ul>的 s,每个中的菜单项数量相等。<li>因此,如果我的 large 中有五个s <ul>,它将如下所示:

Listitem 1           Listitem 3         Listitem5
ListItem 2           Listitem 4

等等

有没有办法在 javascript/jQuery 中做到这一点?:-)

提前致谢。

4

3 回答 3

5

但是,如果您必须向后兼容或出于其他原因需要将其放在单独的列表中,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")); 
于 2013-06-18T08:37:01.610 回答
0

CSS 和 div 怎么样?

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

更多在这里

IE 替代 Column-Count & Column-Gap

于 2013-06-18T08:11:49.063 回答
-1

仍然只有css:

#theList { width: 100% }

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

小提琴

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

于 2013-06-18T08:30:51.113 回答