javascript - 如何根据最高编号对ID列表进行分组？

我写了一些写清单的代码

<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>

我不能对HTML进行太多更改，因为它是写列表的每个语句的数组。我想知道是否可以采用第一批图像image0-image6并将它们包装在div中，与第二批图像类image0-image7和第三批图像类image0-image10相同。

这段代码虽然不漂亮，但是可以工作，我只想包装一个div。

有任何想法吗？

从ID更改为班级，但是同样的问题

我要生产这个...

<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>

最佳答案

http://jsfiddle.net/b7KkU/

相关的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.
        */
    }
}