对于使用jQuery append进行循环

for...in loop with jQuery append

本文关键字：循环 append 于使用 jQuery      更新时间：2023-09-26

我还是学习循环的新手，所以我有点困惑。我有一个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)
}

您在每次迭代中都附加HTML字符串，而不是将整个代码附加到for循环之外。尽管使用Object#hasOwnProperty仅获取自己的属性，而不获取其原型。

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()和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>`;     
  })
)
相关文章：