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

【问题标题】：JavaScript generate an HTML <ul> list with <li> content in a for loopJavaScript 在 for 循环中生成带有 <li> 内容的 HTML <ul> 列表
【发布时间】：2015-02-03 16:51:00
【问题描述】：

我在 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 个项目创建一个新的无序列表标签。很明显，代码都是错误的。我能得到一些帮助吗？

【问题讨论】：

标签： javascript loops iteration modulo

【解决方案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> 并打开一个新的，但不在零（循环中的第一步）。

【讨论】：