Question

让我们假设我有一个包含5个对象的数组/ json。具有3个字段的人物对象。姓名，年龄，性别。

<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

＆＃13;

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

＆＃13;

.person {
  color: green
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

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");
});

＆＃13;

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

＆＃13;

Answer 2

试试这个：

var data = []; // your array of objects

如果你想在具有id'container'的let's say元素中插入div。

var containerElm = document.getElementById('container');
var str = '';
for(var i=0, len=data.length; i<len; i++){
   var divStr = '<div class="person">'+
             '<label for="name">Name: </label> <span id="name">'+data[i].name+'</span><br>'+
             '<label for="age">Age: </label> <span id="age">'+data[i].age+'</span><br>'+
             ' <label for="sex">Sex: </label> <span id="sex">'+data[i].sex+'</span><br>'+
             '<button type="button" class="bdel" id="button">Delete person</button> '+
             '</div> ';
   str = str + divStr;
 }
containerElm.innerHTML = str;

如何在jquery

2 个答案: