Question

我正在寻找一种方法来列出以下循环中的每个名字。目前它循环通过每个名字停在最后一个杰克，只显示它。我想让它显示所有这些：John，Jane，Joe

var person = [{firstName:"John"}, {firstName:"Jane"}, {firstName:"Jack"}];

for (var i = 0; i < person.length; i++) {
document.getElementById("demo").innerHTML = person[i].firstName;
}

有人可以建议我如何做到这一点吗？

Answer 1

问题在于您正在覆盖innerHTML值，而是需要使用＆＃39; +＆＃39; 将您的值附加到innerHTML属性：

var person = [{firstName:"John"}, {firstName:"Jane"}, {firstName:"Jack"}];
var demo = document.getElementById("demo");

for (var i = 0, len = person.length; i < len; i++) {
  demo.innerHTML += person[i].firstName + ' ';
}

查看此codepen。我添加了一些修改以使代码更高效。

Answer 2

请看一下这段代码：

var person = [{firstName:"John"}, {firstName:"Jane"}, {firstName:"Jack"}],
html = "";

for (var i = 0; i < person.length; i++) {
 html += person[i].firstName;
}

document.getElementById("demo").innerHTML = html;

您每次都使用innerHTML覆盖，因为您没有使用'+ ='。我喜欢事先创建一个字符串并将其设置为空。然后你可以添加所有内容，只需要调用innerHTML一次。

希望这有帮助！

Answer 3

这是另一种使用更多functional样式

的方法

"use strict";

var people = [{firstName:"John"}, {firstName:"Jane"}, {firstName:"Jack"}];

var node = document.getElementById('demo');

node.innerHTML = people.map(function(person){
  return person.firstName;
}).join(', ');

#demo {
  padding: 1em;
  background-color: #def;
  border: 1px solid gray
}

<div id="demo"></div>

使用javascript列出for循环中的所有项目

3 个答案: