jQuery: dividere una lista in colonne

jQuery: dividere una lista in colonne

Dividere una lista in colonne è semplice con jQuery.

Il seguente plugin accetta come argomento il numero di colonne in cui vogliamo dividere una lista:


$.fn.extend({
  list2Columns: function( numCols ) {

        var $listItems = $( this ).find( "li" );
        var $listHeader = $( this );
        var numListItems = $listItems.length;
        var numItemsPerCol = Math.ceil( numListItems / numCols );
        var currentColNum = 1, currentItemNumber = 1, returnHtml = "", i = 0;


        for ( i = 1; i <= numCols; i++ ) {
            $( this ).parent().append( '<ul class="column column-' + numCols + ' c-' + i + '"></ul>' );
        }

        $.each( $listItems, function ( j, v ) {
            if ( currentItemNumber <= numItemsPerCol ) {
                currentItemNumber++;
            } else {
                currentItemNumber = 1;
                currentColNum ++;
            }
            $( ".c-" + currentColNum ).append( v );
        });
        $( this ).remove();
    }
});

Torna su