JavaScript
Article

jQuery Convert a List to Columns – $.list2Columns()

By Sam Deering

convert-to-columns

I thought I would share with you a jQuery function I wrote to convert a list (UL or OL) into columns. Could be quite useful if your list comes in and reads from top to bottom it will separate the list items into vertically spaced columns.

The Code

$.fn.extend(
{
    list2Columns: function(numCols)
    {
        var listItems = $(this).html().match(/(
  • .+< /li>)/igm); /* get the list data */ var listHeader = $(this).html().match(/(
      /igm); var numListItems = listItems.length; var numItemsPerCol = Math.round(numListItems / numCols); /* divide by the number of columns requires */ var currentColNum = 1, currentItemNumber = 1, returnHtml = '', i = 0; $(this).empty(); /*clean previous content */ /* append the columns */ for (i=1;i< =numCols;i++) { $(this).append('
        '); } /* append the items to the columns */ $.each(listItems, function (i, v) { if (currentItemNumber < = numItemsPerCol) { $('.listColumn-'+currentColNum).append(v); currentItemNumber ++; } else { currentColNum ++; currentItemNumber = 1; } }); } }); [/js]

        Usage [js] $('#countries').list2Columns(4);

    • Demo

      • Afghanistan
      • Albania
      • Algeria
      • Australia
      • Austria
      • Bahamas
      • Bahrain
      • Bangladesh
      • Barbados
      • Belarus
      • Canada
      • Comoros
      • Congo
      • Cook Islands
      • Costa Rica

      Free Guide:

      7 Habits of Successful CTOs

      "What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

      • http://tutsmais.com.br/blog/ Ofelquis

        Great.. =D
        I redid your plugin, in another way and for the same purpose.
        http://jsfiddle.net/Y5Bq3/

        I hope you enjoy, =)

        • jquery4u

          @Ofelquis,

          Great job mate, good to see some coding from Brazil!

          There is a small bug where it will output null for 5+ columns, it’s not you, apparent in my code too!
          http://jsfiddle.net/K5Ls8/ <-- click run Maybe it's just me but I hate using while loops unless i absolutely have to, maybe it's back to my C++ days. This was a first version, it could be improved but it's a nice little function to have! :) Thanks for sharing! Cheers, Sam

      • schadeck

        I have noticed that the after the function splits the ul, it loses an li for each column created… something to look into.

      • tproli

        Correct me if I’m wrong but the “else” part should also append the current item. The actual item (v) is skipped when moving to a new column.

      Recommended
      Sponsors
      Because We Like You
      Free Ebooks!

      Grab SitePoint's top 10 web dev and design ebooks, completely free!

      Get the latest in JavaScript, once a week, for free.