javascript - 如何使用 jquery 中的数组或 json 中的动态数据填充多个 div

Question

假设我有一个包含 5 个对象的数组/json。具有 3 个字段的 person 对象。姓名、年龄、性别。

<div>
    <div class="person">
      <label for="name">Name: </label> <span id="name"></span><br>
      <label for="age">Age: </label> <span id="age"></span><br>
      <label for="sex">Sex: </label> <span id="sex"></span><br>
      <button type="button" class="bdel" id="button">Delete person</button>   
    </div>   
</div>

如何填充并生成 5 个 div？ 1 个 div 代表 1 个对象。 它应该类似于以下内容:

<div>
    <div class="person>
    <div class="person>
    <div class="person>
    <div class="person>
    <div class="person>
</div>

我不想在我的 jquery 文件中包含太多 html，因为在实际项目中我假设我可能不止 3 个字段/元素。

Answer 1

您可以使用jQuery templates

var items = [{
  id: 0,
  name: 'Test'
}, {
  id: 1,
  name: 'Test 2'
}];
$("#myTemplate").tmpl(items).appendTo(".container");

.person {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<script id="myTemplate" type="text/x-jquery-tmpl">
  <div class="person">
    <label for=" name${id} ">Name:</label> <span id="name${id} ">${name}</span>
  </div>
</script>
<div class='container'>
</div>

或者，您可以迭代并创建 DOM 片段并附加它。

var items = [{
  id: 0,
  name: 'Test'
}, {
  id: 1,
  name: 'Test 2'
}];

items.forEach(function(item) {
  var div = $('<div>', {
    "class": "person"
  });
  var span = $('<span>', {
    "text": item.name,
    "id" : "name" + item.id
  })
  div.append(span).appendTo(".container");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
</div>