如何根据最高数字对ID列表进行分组

How can I group a list of IDs based on the highest number?

本文关键字：列表 ID 数字 何根 高数字      更新时间：2023-09-26

我写了一些代码，可以写一个列表

<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-image7和第三批图像类images0-image10一样，将第一批图像类image_0-image6封装在div中。

这段代码不漂亮，但它很有效，我只想用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>

您正在(并且将要(生成无效的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>

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.
        */
    }
}
相关文章：