Modify list (<ul> <li>) with jQuery

I generated a list of <UL><LI>'s in PHP. The script generates this from top开发者_StackOverflow社区 to bottom:

<ul class="list_test">
<li>111
</li>
<li>222
</li>
<li>333
</li>
<li>444
</li>
<li>555
</li>
<li>666
</li>
<li>777
</li>
<li>888
</li>
<li>999
</li>
<li>1010
</li>
</ul>

Right now they are rendered like this:

111
222
333
444
555
666
777
888
999
1010

How can I combine these in groups?

Let's say, I would like for example for them to be rendered as:

111 555 999
222 666 1010
333 777 etc
444 888

How can I do this?

I would like to use only Javascript and not modify the PHP. I thought about adding a div for example, 100 px high, that would wrap on the right...

jsfiddle: http://jsfiddle.net/hf2PL/

I've mocked up a solution here: http://jsfiddle.net/eqvc4/

It uses absolute positioning to re-arrange the <li> elements into columns. The JavaScript code is as follows:

var $ul = $('ul'),
    $li = $ul.children(),
    cols = 3,
    rows = Math.ceil($li.length / cols),
    height = rows * 1.2,
    width = cols * 5;

$ul.css({ height: height+'em', width: width+'em' });
$li.each(function(index) {
    var col = Math.floor(index / rows),
        row = index % rows,
        left = col * 5,
        top = row * 1.2;

    $(this).css({ left: left+'em', top: top+'em' });
});

It also requires the following CSS:

ul {
    position: relative
}

li {
    width: 5em;
    height: 1.2em;
    position: absolute;
}

There's some fine jQuery plugins for columnizing stuff.

But, for giggles, here's a method with dynamic width (columns use all of the container width).

See it in action at jsFiddle.

Base CSS:

.list_test li {
    line-height: 1.5em; /* Linked to code, for now. */

    /* Clear the default margins & padding
       so we can style the list from scratch */
    margin: 0;
    padding: 0;
}

JavaScript:

$(function () {
    columnize (".list_test", "li", 3);
} );

//--- All items must be equal height!  For now.

function columnize (contSelect, itemSelect, numColumns) {
    var container   = $(contSelect);
    var items       = container.children (itemSelect);
    var maxWidth    = container.width ();

    //--- Set defaults.
    var numColumns  = numColumns  ||  2;

    //--- Add the appropriate classes to the items.
    var itemsPerCol = Math.ceil (items.length / numColumns);
    items.each ( function (J) {
        var colNum  = Math.floor (J / itemsPerCol) + 1;
        $(this).addClass ('COLMZ_Column_' + colNum);

        //--- Is this the top of a column (except the first)?
        if (J  &&  ( (J / itemsPerCol) + 1 ) == colNum)
            $(this).addClass ('COLMZ_Reset');
    } );

    //--- Write the custom styles.
    var marginReset = itemsPerCol * 1.5 // Based on style, for now.
    var columnWidth = Math.floor (maxWidth / numColumns)
    var styleStr    = contSelect + ' .COLMZ_Reset {margin-top: -' + marginReset + 'em;}\n';

    for (var J = 0;  J < numColumns;  ++J) {
        var margAdj = columnWidth * J;
        styleStr   += contSelect + ' .COLMZ_Column_' + (J+1) + '{margin-left: ' + margAdj + 'px;}\n';
    }
    $('<style type="text/css"></style>').text (styleStr).appendTo ('body');
}