CODEWITHSUNDEEP
jqueryhtml
Manan
Manan

Reputation: 1205

Grouping list item using with jquery

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

Upvotes: 1

Views: 172

Answers (1)

charlietfl
charlietfl

Reputation: 171669

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/

Upvotes: 1

Related Questions