Question

I have written some code that writes a list

<ul class="portfolios" style="opacity: 1;">
<li class="image0">
<li class="image1">
<li class="image2">
<li class="image3">
<li class="image4">
<li class="image5">
<li class="image6">
<li class="image0">
<li class="image1">
<li class="image2">
<li class="image3">
<li class="image4">
<li class="image5">
<li class="image6">
<li class="image7">
<li class="image8">
<li class="image9">
<li class="image10">
<li class="image0">
<li class="image1">
<li class="image2">
<li class="image3">
<li class="image4">
<li class="image5">
<li class="image6">
<li class="image7">
</ul>

I can’t change the HTML too much as it’s an array each statement that is writing the list. I want to know if it’s possible to take the first lot of classes image0 – image6 and wrap them in a div the same with the second lot of image classes image0-image7 and the third lot image0-image10.

This code isn’t pretty but it works, I just would like to wrap in a div.

Any ideas?

Changed from ID to class, same problem though

I want to produce this…

<ul class="portfolios" style="opacity: 1;">
    <li class="image0">
    <li class="image1">
    <li class="image2">
    <li class="image3">
    <li class="image4">
    <li class="image5">
    <li class="image6">
</ul>
<ul class="portfolios" style="opacity: 1;">
    <li class="image0">
    <li class="image1">
    <li class="image2">
    <li class="image3">
    <li class="image4">
    <li class="image5">
    <li class="image6">
    <li class="image7">
    <li class="image8">
    <li class="image9">
    <li class="image10">
</ul>
<ul class="portfolios" style="opacity: 1;">
    <li class="image0">
    <li class="image1">
    <li class="image2">
    <li class="image3">
    <li class="image4">
    <li class="image5">
    <li class="image6">
    <li class="image7">
</ul>

Answer 1

http://jsfiddle.net/b7KkU/

relevant jquery:

//Create the other two ul's (I've added id's for convenienece)
$("body")
    .append("<ul id='two' class='portfolios'>")
    .append("<ul id='three' class='portfolios'>");

portfoliosLen = $(".portfolios li").length;

for (i=0; i<portfoliosLen; i++) {
    if (i < 7) { // <-- first 7 li
        //Do nothing (Basically, leave it in this ul)
    }
    else if (i >= 7 && i < 15 ) { // <-- next 8 li
        //Move to second ul
        $(".portfolios li").eq(7).appendTo("ul#two");
        /*
          From the above code eq(7) remains constant. eq(7) = 8th li
          This means take the 8th element from this ul and move it.              
        */
    }
    else { // <-- remaining li
        //Move to third ul
        $(".portfolios li").eq(7).appendTo("ul#three");
        /*
          On each iteration of the for loop, we're taking the 8th li
          and moving it somewhere.
        */
    }
}