jquery - 使用 jquery 对列表项进行分组

Question

我的 html 文件中有以下简单的列表项代码

<ul>
    <li>item one</li>
    <li>item two</li>
    <li>item three</li>

    <li>item four</li>
    <li>item five</li>
    <li>item six</li>

    <li>item seven</li>
    <li>item eight</li>
    <li>item nine</li>

    <li>item ten</li>
    <li>item eleven</li>
    <li>item twelve</li>    
</ul>

我想使用 jQuery 以这种方式输出。

item one     item four    item seven    item ten
item two     item five    item eight    item eleven
item three   item six     item nine     item twelve

Answer 1

这是一个创建多个UL并浮动它们的解决方案

CSS

.col_4 {
    width:25%;
    float:left
}

HTML

<ul class="list"><li></li></ul>

JS

/* config*/
var numCols = 4,
    listClass = 'list';

var $list = $('.' + listClass),
    $container = $list.parent(),
    $items = $list.children().detach(),
    numItems = $items.length,
    itemsPerCol = Math.ceil(numItems / numCols),
    sliceStart = 0;

/* remove original empty list and create new ones*/
$list.remove();

for (i = 0; i < numCols; i++) {
    var endSlice = sliceStart + itemsPerCol + 1;
    $('<ul class="' + listClass + ' col_' + numCols + '">')
                        .append($items.slice(sliceStart, endSlice))
                        .appendTo($container);
    sliceStart += itemsPerCol;
};

演示http://jsfiddle.net/G7BfY/