[jQuery] Building Columns From A List Of Items

[Nic Hubbard]

I have a list of names wrapped in <p> tags that are sorted in
alphabetical order.  I am trying to build 3 even columns out of
these.  There are 63 items, so each column should have 21 items.  I
have a script that kind of works, but it is making my items out of
order, as it is somehow grouping them in a strange way.

        var classNames = ['first', 'second', 'third'];
        $('#artistsColumns p').each(function(i){
                var n = Math.floor(i/10) % 3;
                $(this).addClass(classNames[n]);
        });

        // Now lets wrap those in some divs
        $('p.first').wrapAll('<div class="colFirst"></div>');
        $('p.second').wrapAll('<div class="colSecond"></div>');
        $('p.third').wrapAll('<div class="colThird"></div>');

Basically each group of classes get wrapped with a "column" div, but,
once of the columns is getting too many times and the items are
getting the wrong classes.

Also, how can I write this so that I can continue to add new items and
it will keep my columns as even as possible?