1

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
4

1 に答える 1

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/

于 2013-01-26T19:39:06.793 に答える