爲數據集克隆模板時會發生類錯誤

問題是，在爲每個數據記錄創建元素之間，類會累積起來。

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

來源

2011-11-11 Sam

你也應該從克隆的元素刪除ID。否則它不知道他需要克隆哪一個

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

來源

2011-11-11 12:08:43

更改下面一行將刪除元素上的所有類，使您可以添加所需的一個。

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

根本的問題是由於你克隆的元素，同時保持ID的事實。下次您使用ID選擇器時，您會選取多個元素。因此t結合將是值得追加之前改變克隆元素的ID：

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

來源

2011-11-11 12:07:53

爲數據集克隆模板時會發生類錯誤

回答

相關問題