Блог

Я столкнулся с проблемой при клонировании шаблона 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 и 1.6.4.

вы также должны удалить идентификатор из клонированных элементов. иначе он не знает, какой из них ему нужно клонировать

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

Изменение следующей строки приведет к удалению всех классов в элементе, что позволит вам добавить только тот, который вы хотите.

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

Основная проблема связана с тем фактом, что вы клонируете элемент, сохраняя идентификатор. В следующий раз, когда вы используете селектор идентификаторов, вы получаете несколько элементов. Поэтому также стоило бы изменить идентификатор клонированного элемента перед его добавлением:

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