for...in 循环 jQuery append

Question

我对学习循环还很陌生，所以有点困惑。我有一个 for...in 循环，循环一个 json 对象文件。然后我让 jQuery 为每个对象创建一些 html 元素。不过我有一个问题，每次循环时，它都会重复以前的对象和新对象，因此输出变为：

-name

-name
-test

-name
-test
-someone

-name
-test
-someone
-something

但我正在努力

-name

-test

-someone

-something

我怎样才能做到这一点？

我目前的代码是这样的：

var html = ""
for (var name in urls) {
    html += `<div class='card-panel white'><div class='container'><div class='row'><div class='input-field col s12'> ${name} <br> ${urls[name].url} </div></div></div></div>`
    $("#main").append(html)
}

Answer 1

您在每次迭代中附加 HTML 字符串，而不是将整个代码附加到 for 循环之外。虽然使用Object#hasOwnProperty for getting only own properties and not its prototypes。

var html = ""
for (var name in urls) {
  if(urls.hasOwnProperty(name))
    html += `<div class='card-panel white'><div class='container'><div class='row'><div class='input-field col s12'> ${name} <br> ${urls[name].url} </div></div></div></div>`;
}
$("#main").append(html)

我觉得用Object.keys() and String#map方法会更好

$("#main").append(
  Object.keys(urls).map(function(name){
    return `<div class='card-panel white'><div class='container'><div class='row'><div class='input-field col s12'> ${name} <br> ${urls[name].url} </div></div></div></div>`;     
  })
)

for...in 循环 jQuery append

for...in loop with jQuery append

javascript

jquery

for-loop

for-in-loop