Javascript 使用jQuery html（）而不是document.write在for循环中进行多次迭代

我有三组数组，它们是通过循环和排序json数据得到的。比如说，arr1，arr2，arr3。我想将这些数组与HTML代码组合输出五次。到目前为止，我有以下代码：

  var max=5;
  for (var b = 0;b < max;b++) {
    var conEl = $('#container');
    var newConEl = conEl.html();
    newConEl = '<ul>';
    var newProp = '<li><span><a href="'+arr1[b]+'">'+arr2[b]+'</a><span>'+arr3[b]+'</span></span></li>';
    newConEl += newProp + '</ul>';
    return conEl.html(newConEl);
  }

var max=5；
对于（变量b=0；b”；
var newProp='
'+arr3[b]+'
'；
newConEl+=newProp+''；
返回conEl.html（newConEl）；
}

但是，这只输出一个结果。结果是：

<div>
  <span>
   <a href="#link-to-result-1">result-1-title</a>
   <span>view-count-1</span>
  </span>
</div>

视图-count-1

同时，我希望有五个输出。我期望的结果是：

<div>
  <span>
   <a href="#link-to-result-1">result-1-title</a>
   <span>view-count-1</span>
  </span>
  <span>
   <a href="#link-to-result-2">result-2-title</a>
   <span>view-count-2</span>
  </span>
  <span>
   <a href="#link-to-result-3">result-3-title</a>
   <span>view-count-3</span>
  </span>
  <span>...</span>
</div>

视图-count-1
视图-count-2
视图-count-3
...

---

当使用document.write（newProp）时，我得到了我想要的输出（五个输出）。但是，我不想使用document.write方法。

有几个问题：

在wron gplace中有

返回

，因此循环仅在一次迭代后结束

您正在每个循环上覆盖

newConEl

您也在循环中覆盖

newConEl

（有两行代码都在

newConEl=

，一行接一行）

在每次迭代中，你都要做一个开始和结束的

div

标记，而你的问题表明你想要的结果只有一个

div

您在循环中反复获取

conEl

的旧HTML；我看不出有任何理由抓取那个旧的HTML

您不能将

li

作为

div

的直接子级，并且所列出的所需结果中没有

li

s，但您要在HTML中包含

li

条目

如果首先将

newConEl

设置为

”

，然后附加到它（

+=

），然后在末尾添加最后一个

”

，并在元素上设置该值（不检索其当前HTML），您应该会得到预期的结果：

var max = 5; // <== Are you really sure arr1, arr2, and arr3 all have at least 5 entries?
var newConEl = '<div>';
for (var b = 0; b < max; b++) {
    newConEl += '<span><a href="'+arr1[b]+'">'+arr2[b]+'</a><span>'+arr3[b]+'</span></span>';
}
newConEl += '</div>';
return $("#container").html(newConEl);

---

那一行

var newConEl=conEl.html（）

后面紧跟着

newConEl=''-第二行将覆盖变量的值。这意味着，我应该移动
var newProp='
'+arr3[b]+'
'；newConEl+=newProp+''在上面？我已经这样做了，但是结果和我的问题一样。太好了！这很有效，先生。我带来了你的第一个解决方案。现在，我对javascript有了一些新的认识。关于，
内部的
，
实际上是
：D。提前感谢您的帮助！
return $("#container").html(
    "<div>" +
    arr1.reduce(function(html, entry, i) {
        return html + '<span><a href="' + entry + '">' + arr2[i] + '</a><span>' + arr3[i] + '</span></span>';
    }, "") +
    "</div>"
);