Jquery ul with many li items seperated to a ul with rest of the li items

Question

Whats up peeps..

lets say i have a ul with 30 li items

<ul class="column">
  <li>portfolio items 1</li>
  <li>portfolio items 2</li>
  ...
  <li>portfolio items 29</li>
  <li>portfolio items 30</li>
</ul>

i need jquery to take li items from 10 into a new ul column and if possible from 20 into a third column

so if my ul list had 30 li items it would have only 10 and create a new ul coumn with the rest of the li items.

example of what i'm trying to do is within my portfolio http://www.missionandromeda.com

i'm basicly migrating to wordpress and i must have all entries within 1 ul. would have been very easy if i only had 1 column but my design require 4 =/

Thanks! (;

Answer 1

Try this. It assumes that the new ULs need to be created dynamically.

UPDATE: Created a version that assignes the class, and doesn't assign IDs at all.

$('document').ready(function() {
  var i = 0;
  var $newUL;
  var $theColumn = $('.column');
  var length = $theColumn.children('li').length;
  while(length > 10) {
    $newUL = $('<ul class="' + $theColumn.attr('class') + '"></ul>');
    while(i < 10) {
        $theColumn.children('li').eq(10).appendTo($newUL)
        i++;
        length--;
    }
    $('body').append($newUL);
    i = 0;
  }
});

Here's another way to do it. (this time the class name is hardcoded, though it doesn't need to be):

$(document).ready(function() {  
    var $newUL;
    while($('.column:last').children('li').length > 10) {
        $newUL = $('<ul class="column"></ul>');
        $('.column:last').children('li').slice(10).appendTo($newUL);
        $newUL.appendTo('body');
    }
});