Question

我在javascript / jQuery中有一个for循环来创建一个html无序列表。我希望10次迭代的每个倍数都是一个新的无序列表标记。

JavaScript代码：

var count = 100;
for(var i = 0; i <= count; i++) {
    if(i == 0) {
        $('ul.list').append('<li>' + i + '</li>');
    } else {
        if(i % 10 == 0) {
            $('ul.list').after('<ul class="list"></ul>');
        }
        $('ul.list:last-child').append('<li>' + i + '</li>');
    }
}

它看起来应该可以工作，但JavaScript会生成这个：

<ul class="list"><li>0</li></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
<ul class="list"></ul>
...

我希望它输出10个<li>个项目，然后每隔10个项目创建一个新的无序列表标记。显然，代码都是错的。我可以得到一些帮助。

Answer 1

我更倾向于使用HTML构建一个字符串，然后将其发布一次。

尝试......

var max = 100;
var HTML = ["<ul class='list'>"];
for (var i=0,len=max; i<len; i++) {
  HTML.push("<li>" + i + "</li>");
  if (i%10===0 && (i!==0) {
    HTML.push("</ul>");
    HTML.push("<ul class='list'>");
  }
}
HTML.push("</ul>");

$("#lists").html(HTML.join("\n");

基本上，我已经构建了一个所需的html代码数组，然后在将它放入DOM时将其合并为一个包含换行符\n的字符串。

循环中的if关闭<ul>并打开一个新的，但不是零（循环的第一步）。

JavaScript在for循环中生成带有<li>内容的HTML <ul>列表</li> </ul>

1 个答案: