データ配列のテンプレートを複製するときのクラス

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> 

をそれだけでtest3あるべきtest1 test2 test3に注意してください。私は何かを逃しているのか、それとも間違っているのか？

jQueryでテストされた1.7 & 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セレクターを使用するときに、複数の要素を取得しています。したがって、tはまた、それを追加する前にクローン化された要素のIDを変更する価値があるだろう：

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