Question

I’m trying to split a long list of <li> into 3 columns with javascript, instead of CSS3 (as it’s not supported in all browsers, i.e. IE). But it’s not working.
Basically, I want to take every 5 or 7 or 3, whatever number, <li>‘s and make them as columns and so on. So if I have A B C D E F G H I J K L in list, the 1st column should consist of ABCDEF and the next column will start from GHIJKL. I hope you see what I mean.

Javascript:

var colCount = 3,
        ul = $('ul'),
        li = ul.find('li'),
        liLen = li.length,
        liPerCol = Math.ceil(liLen / colCount),
        ulWrap = '<ul style="float:left;width:200px;margin-right:20px;" />',
        liSub,
        i;

for(i = 0; i < liLen; i++){
    liSub = liLen.slice(i, 4);
    liSub.wrap($(ulWrap));
}

HTML:

<ul>
  <li><a href="#">COLUMN 1</a></li>
  <li><a href="#">col 1.1</a></li>
  <li><a href="#">Apsum</a></li>
  <li><a href="#">Aonor</a></li>
  <li><a href="#">Aomsdomsdio</a></li>
  <li><a href="#">Asdijnd oasd</a></li>
  <li><a href="#">Awrom</a></li>
  <li><a href="#">Aoidn iojd</a></li>
  <li><a href="#">Apyrie sdij</a></li>
  <li><a href="#">Asddewdwe</a></li>    
  <li><a href="#">Apsum</a></li>
  <li><a href="#">Aonor</a></li>
  <li><a href="#">Aomsdomsdio</a></li>
  <li><a href="#">Asdijnd oasd</a></li>
  <li><a href="#">Awrom</a></li>
  <li><a href="#">Aoidn iojd</a></li>
  <li><a href="#">Apyrie sdij</a></li>
  <li><a href="#">Last entry col 1</a></li>
</ul>

Please I need your assistance.

Many thanks.

Answer 1

Is this what you’re looking for:

http://jsfiddle.net/97sJ6/1/

This splits the li’s up into three columns.

var li = $('li'),
    len = li.length,
    col_len = 3,
    num_cols = Math.floor(len/col_len),
    j = 0;

li.each(function(i) {
    if (i % num_cols == 0 && j < col_len) {
        j++;
        $('body').append('<ul style="float:left;width:200px;margin-right:20px;" id="divider' + j + '"/>');          
    }
   if (j == col_len+1) j--;
   $(this).appendTo('#divider' + j);

});