javascript - 如何在 JS 中更改生成的 HTML 中的值？

Question

我使用 js 生成了以下 HTML:

var htmlBox = "<div><span class='name'></span><span class='age'></span></div>"

我想在遍历 Json 对象 staff 时显示所有姓名。

for(var i = 0;i <= staff.length;i++){
    $(htmlBox).find('span.name').text(staff[i]['name']); # Not sure
    $(htmlBox).find('span.age').text(staff[i]['age']); # doesn't work   

    $("#wrapper").append(htmlBox);
}

我不知道如何使用 raw js 或 jquery 做到这一点。

Answer 1

我建议在每次循环迭代时从 HTML 字符串创建一个 jQuery 对象。
另外，由于数组是 zero-based , 循环直到 i <= staff.length一个索引会走得太远。
相反，尝试 i < staff.length .

var staff = [{
    'name': 'John Doe',
    'age': 100
  },
  {
    'name': 'Jane Doe',
    'age': 50
  }
];

var boxTemplate = "<div><span class='name'></span><span class='age'></span></div>";

var $wrapper = $('#wrapper');

for (var i = 0; i < staff.length; i++) {
  var $thisBox = $(boxTemplate);
  $('.name', $thisBox).text(staff[i]['name']);
  $('.age', $thisBox).text(staff[i]['age']);
  $wrapper.append($thisBox);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>