jQuery: dividere una lista in più liste

In questo articolo vedremo come ricavare due sottoliste da una lista HTML principale. Vediamo insieme i dettagli.

Partiamo dalla seguente lista HTML:

<ul id="test">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
</ul>​

Dobbiamo dividere a metà il numero di voci ed usare i dati ottenuti con il metodo slice() abbinato al metodo wrapAll():

(function($) {
    $.fn.splitList = function() {
        var that = this,
            li = $('li', that),
            len = li.length,
            half = Math.round(len / 2);
        return that.each(function() {

            li.slice(0, half).wrapAll('<ul></ul>');
            li.slice(half, len).wrapAll('<ul></ul>');

        });
    };
})(jQuery);

$('#test').splitList();