Question

I have following simple list item code in my html file

<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>

and i want to output like this way using with 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

Here’s a solution that creates multiple UL and floats them

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;
};

DEMO http://jsfiddle.net/G7BfY/