Question

我正在处理我的小代码。我想从我的数组对象中追加一些HTML元素。这些是我的代码。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <div class="container">
  </div>
</body>
</html>

的Javascript

var obj=[
  {
    name: "john",
    phone: "0831",
    tasks:["run","slide"]
  },
  {
    name: "billy",
    phone: "0798",
    tasks: ["swim", "fly", "crawl"]
  }
]

var str="";

for(i=0;i<obj.length;i++){
    str+='<div>';
    str+='<h1>'+obj[i].name+'</h1>';
    str+='<p>'+obj[i].phone+'</p>';
    str+='<ul>'
    str+='<li>'+obj[i].tasks[0]+'</li>';
    str+='<li>'+obj[i].tasks[1]+'</li>';
    str+='<li>'+obj[i].tasks[2]+'</li>';
    str+='</ul>'
    str+='</div>';

    $(".container").html(str);
}

问题

问题是，当我想在多个 li 元素上附加任务对象属性时，由于属性数量不同，有一个未定义的属性。

近期输出

<div class="container">
  <div>
    <h1>john</h1>
    <p>0831</p>
    <ul>
      <li>run</li>
      <li>slide</li>
      <li>undefined</li>
    </ul></div>
  <div>
    <h1>billy</h1>
    <p>0798</p>
    <ul>
      <li>swim</li>
      <li>fly</li>
      <li>crawl</li>
    </ul>
  </div>
</div>

问题

我的问题是如何将li元素追加到与对象属性相同的数量，所以没有更多未定义的属性，如上所述？

Answer 1

也许就像这样

...
str+='<ul>'
for (var ii = 0; ii < obj[i].tasks.length; ii++) {
    str+='<li>'+obj[i].tasks[ii]+'</li>';
}
str+='</ul>'
...

从Object Property追加HTML元素

1 个答案: