Was wäre der ideale Weg, um eine Liste in Spalten zu formatieren, wo sie vertikal alphabetisch bleiben?

Question

Say hat man eine Liste der US-Staaten, etwa so:

<ul> 
    <li>Alabama</li> 
    <li>Alaska</li> 
    <li>Arizona</li> 
    <li>Arkansas</li> 
    <li>California</li> 
    <li>Colorado</li> 
    <li>Connecticut</li> 
    <li>Delaware</li> 
    <!-- and so on with all 50 --> 
</ul> 

Es ist leicht genug, um sie in vier Spalten mit nur CSS formatiert werden:

li {float:left; width:25%;} 
li:nth-of-type(4n+5) {clear:left;} 

dass vier Spalten erzeugt, und sorgt dafür, Das 5. Element löscht immer die vorherigen Elemente.

Dies wird jedoch in der ersten Spalte beginnend mit Alabama, dem zweiten Alaska, dem dritten Arizona und dem vierten Arkansas führen.

Stattdessen versuche ich herauszufinden, der beste Weg, um alle vier Spalten relativ gleiche Mengen von Staaten (50/4 = 12,5, so dass die Spalten 1 - 3 13 Listenelemente enthalten würde, und die letzte Spalte enthält die 11 verbleibende Punkte), und gleichzeitig sollte die erste Spalte die ERSTEN 13 Staaten (dh Alabama - Illinois) enthalten, die ZWEITEN die 14 - 27 Staaten (Indiana - Montana), und so weiter.

zu jQuery für diese Schiefe, so weit habe ich es gemacht:

var list_items_count = $('li').length, // get the total number of list items 
    even_list_math = list_items_count/4, // divide that by 4 columns 
    even_list_amount = Math.ceil(even_list_math), // round the number up 
    column_1_start = 0, // it doesn't = 1 because 0 = 1 
    column_2_start = even_list_amount, // 1st item in column 2 
    column_3_start = even_list_amount * 2, // 1st item in column 3 
    column_4_start = even_list_amount * 3; // 1st item in column 4 

    $('li').each(function(index, val) { 
     if (index == column_1_start) { 
      $(this).before('<li><ul>'); 
     } else if (index == column_2_start || index == column_3_start || index == column_4_start) { 
      $(this).before('</ul></li><li><ul>'); 
     } else if (index == list_items_count) { 
      $(this).after('</ul></li>'); 
     } 
    }); 

Aber wenn ich das tue, möchte jQuery meine Elemente schließen.

Also statt:

<ul> 
    <li><ul> <!-- this should be created in the first $(this).before() statement --> 
     <li>Alabama</li> 
... 
</ul> 

jQuery automatisch schließen diejenigen Elemente:

<ul> 
    <li><ul></ul><li> <!-- the closing UL and LI tags shouldn't be here --> 
     <li>Alabama</li> 
... 
</ul> 

Kann ich es verhindern, so zu tun? Oder gibt es etwas anderes falsch mit meinem jQuery, das repariert oder optimiert werden muss?

Bearbeiten: Während dieses Beispiel 50 Zustände zeigt, ist der Inhalt, mit dem ich arbeite, dynamisch. So könnte es eine Liste von 1000 Arten von Gemüse, 3 Ländern, 28 Möglichkeiten sein, Ihren Mann usw. zu halten. Also all dies ...

Ich experimentiere auch mit .wrap(), aber mit noch keinem Glück.

var li_elems = $('li'), 
    li_arr = $.makeArray(li_elems); 
    while(li_arr.length) { 
     li_arr.splice(0,even_list_amount); 
    } 
    $.each(li_arr, function(index, val) { 
     $(this).wrap('<ul class="test"></ul>'); 
    }); 

Answer 1

Sie könnten Kombination von slice und wrapAll verwenden. Demo.

Die Lösung ist einfach.

$(function() { 
    var items = $('#list > li'), 
    count = items.length, 
    columns = 4, 
    perColumn = Math.ceil(count/columns); 

    for(var i = 0; i < columns; i++) { 
    items 
     .slice(i*perColumn, (i+1)*perColumn) //group 
     .wrapAll('<li class="column"><ul class="inner"/></li>') //wrap 
    } 
}) 

Oder wenn Sie nicht über alten Browser kümmern könnten Sie CSS3 multiple-columns layout verwenden. Demo.

ul { 
    column-count: 4; //important part 
    margin: 0; 
    padding: 0; 
}