Question

克隆模板div时，我遇到了一个问题，即为数据集创建元素。

问题是类在为每个数据记录创建元素之间累积。

示例JS：

$(document).ready(function(){
  var data = [
     {cls: 'test1',text:'test1'},
     {cls: 'test2',text:'test2'},
     {cls: 'test3',text:'test3'}
  ];
  for(var x in data)
  {
     var item = $('#itemTemplate').clone().removeClass('template');
     item.addClass(data[x].cls).html(data[x].text);
     $('#test-container').prepend(item);
  }
});

HTML正文：

<div id="test-container">
</div>
<div id="itemTemplate" class="template">
</div>

这会产生：

<div id="test-container">
   <div id="itemTemplate" class="test1 test2 test3">test3</div>
   <div id="itemTemplate" class="test1 test2">test2</div>
   <div id="itemTemplate" class="test1">test1</div>
</div>

请注意test1 test2 test3应该只是test3。我错过了什么或者说错了吗？

在jQuery 1.7＆amp;中测试1.6.4。

Answer 1

您还应该从克隆元素中删除id。否则它不知道他需要克隆哪一个

item.addClass(data[x].cls).html(data[x].text).removeAttr("id");

Answer 2

更改以下行将删除元素上的所有类，允许您只添加所需的类。

var item = $('#itemTemplate').clone().removeClass()

潜在的问题是由于您在维护ID的同时克隆元素。下次使用ID选择器时，您将获取多个元素。因此，在附加克隆元素之前，还值得更改克隆元素的ID：

var item = $('#itemTemplate').clone().attr("id", data[x].text).removeClass()

克隆数据数组模板时的类

2 个答案: