JavaScript 在 for 循环中生成包含 内容的 HTML 列表

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> items，然后每 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 代码的数组，然后将其合并为一个带有换行符的字符串 \n当我将它放入 DOM 中时。

if循环内部关闭 <ul>并打开一个新的，但不在零上(循环的第一步)。