javascript - Use jQuery/JS to split a single <ul> into four separate <ul>'s -

i have single <ul> dynamically generated anywhere between 8 , 25 <li>'s.

example html:

<ul id="genlist">  <li>one</li>  <li>two</li>  <li>three</li>  <li>four</li>  <li>five</li>  <li>six</li>  <li>seven</li>  <li>eight</li> </ul> 

is there way split single <ul> 4 columns?

i've got far:

jquery(function ($) {   var size = 4,       $ul  = $("ul"),       $lis = $ul.children().filter(':gt(' + (size - 1) + ')'),       loop = math.ceil($lis.length / size),          = 0;    $ul.css('float', 'left').wrap("<div style='overflow: hidden'></div>");    (; < loop; = + 1) {     $ul = $("<ul />").css('float', 'left').append($lis.slice(i * size, (i * size) + 4)).insertafter($ul);   } }); 

which wraps columns 4 deep. need divide <ul> 4 first , pass rounded value var size.

edit: needs support ie8 , above , maintain vertical integrity of list (column 1 goes: 1, 2 etc).

modified posted javascript:

jquery(function ($) {   var rows = 4,       $ul  = $("ul"),       $lis = $ul.children(),       size = math.ceil($lis.length / rows),        $lis = $lis.filter(':gt(' + (size - 1) + ')'),       loop = math.ceil($lis.length / size),          = 0;    $ul.css('float', 'left').wrap("<div style='overflow: hidden'></div>");    (; < loop; = + 1) {       $ul = $("<ul />").css('float', 'left').append($lis.slice(i * size, (i * size) + size)).insertafter($ul);   } });