Question

我写了一些编写列表的代码

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

Answer 1

您（并将会）生成无效的HTML：

ID必须在文档中唯一
ul元素不能包含div元素

尝试将以下代码粘贴到http://validator.w3.org/check并查看错误

<!DOCTYPE HTML >
<html>
  <head><title>Blah</title></head>
  <body>
    <ul>
      <li id="myli_1">Blah</li>
      <div>
        <li id="myli_2">Blah</li>
        <li id="myli_1">Blah</li>
      </div>
    </ul>
  </body>
</html>

相反，你应该：

将您的图片分组为单独的UL元素
如果真的需要，为他们分配一个唯一的ID

例如：

<ul id="portfolio0" class="portfolios">
  <li id="image0_0" class="ui-draggable">
  <li id="image0_1" class="ui-draggable">
  <li id="image0_2" class="ui-draggable">
  <li id="image0_3" class="ui-draggable">
  <li id="image0_4" class="ui-draggable">
  <li id="image0_5" class="ui-draggable">
  <li id="image0_6" class="ui-draggable">
</ul>

<ul id="portfolio1" class="portfolios">
  <li id="image1_0" class="ui-draggable">
  <li id="image1_1" class="ui-draggable">
  <li id="image1_2" class="ui-draggable">
  <li id="image1_3" class="ui-draggable">
  <li id="image1_4" class="ui-draggable">
</ul>

Answer 2

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

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

2 个答案: