对json文件中的项目数量重复clone操作

repeat the clone action with the amount of items in my json file

本文关键字：clone 操作 项目数 json 文件      更新时间：2023-09-26

我有一个JSON文件，它给了我一些我想克隆到页面上的名称，但每次都有一个新名称和一个新的div。

我尝试了很多方法，但都没能奏效。

目前我有：

var cloneTeam = $('.team').clone();
    for( var i = 0; i < teams.length; i++) {
        cloneTeam
            .appendTo('.team-catagory')
            .find('.team-name').text(teams[i].name);
    }

获取项目的jquery对象后，每次要将其附加到目标位置时都要对其进行克隆。

var teams = [
  {name: 'a'},
  {name: 'b'},
  {name: 'c'},
  {name: 'd'},
];
// Get reference to the template.
// Only reference it at start.
var cloneTeam = $('.team');
var appendTarget = $('.team-category');
for( var i = 0; i < teams.length; i++) {
  cloneTeam
   .clone()     // clone the template here.
   .appendTo('.team-catagory')
   .find('.team-name').text(teams[i].name);
}
// If you get its reference during or after the loop, 
// jquery will get all elements that have clase .team,
// which means element created before will now be included.
console.log(cloneTeam = $('.team'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tmpl' class='team'>
  <div class='team-name'></div>
</div>
<div class='team-catagory'></div>

相关文章：