JQuery - Clonedオブジェクトの要素の値を編集する方法は？

ここに私のHTMLです。書式設定のお詫び - これは私の最初の質問です！JQuery - Clonedオブジェクトの要素の値を編集する方法は？

<div id="Template"> 
        <table cellspacing="0" width="100%"> 
         <tr valign="top"> 
           <td> 
            <span class="Name" ></span> 
            (<span class="Id"></span>) 

             <span class="Addr" ></span><br> 
             <span class="City" ></span>,&nbsp; 
             <span class="State" ></span>&nbsp; 
             <span class="Zip" ></span><br> 
           </td> 
        </tr> 

        </table>

ここではこれまでのところ、私のjQueryの：

$.getJSON(serverURL,{ id: X }, 
     function(data) { 

      $.each(data, function(key,val){ 
       var clonedDiv= $('#Template').clone(); 

       //"Each" below represents the various data members of the object currently being processed. 
       $.each(val,function(key2,value){ 

        //Below are the only Keys needed so skip the rest. 
        if (key2=='Id' || key2=='Name' || key2=='Addr' || key2=='City' || key2=='State' || key2=='Zip'){ 
         alert('Key2:'+key2+' val2:'+JSON.stringify(value)); 
       ///INSERT VALUE INTO NEWLY-CLONED DIV SPAN CHILD HERE???  
        } 

       }); 
       $('#TemplatePrev').append(clonedDiv); 
      }); 
     }) 
.success(function() { 
    alert('success'); 
}) 
.error(function() { alert('error'); }) 
.complete(function() { 
    //alert('complete'); 
});

上記を実行すると、10個のJSON呼び出しによって返されたオブジェクトとjQueryのクローン10件のDIVがあります#Template divのように見えます。しかし、JSON Stringified値を各スパンに動的にシフトする必要があります。どのようにこれを行うにはどのようなアイデア？私はここで2時間勤務してからここに転落して転記しています。前もって感謝します！

出典

2012-03-30 Rod Johnson

それはあなたのケースでは、あなたは間違いなく、10 '＃Template'、代わりに自分自身の良い:) –

イエスの利用クラスになってしまいます、HTMLドキュメント内の単一のIDを持っていることは通常推奨勧めします。私は10個の一意のID値を生成するように、その "テンプレート"の最後に動的に番号を割り当てます。それを指摘してくれてありがとう！ –

あなたは次のことを試しましたか？

if (key2=='Id' || key2=='Name' || key2=='Addr' || key2=='City' || key2=='State' || key2=='Zip'){     
    clonedDiv.find('.' + key2).text(JSON.stringify(value)); 
}

出典

2012-03-30 02:58:10

おそらくこのような何か：

clonedDiv.find('span.'+key2).text(JSON.stringify(value));

出典

2012-03-30 02:59:01

彼らはすべて同じになるでしょう！ –

修正済み！今彼らはしません:-) –

それは働いた - ありがとう!!!! –

明白な解決策は、あなたのためにこれを行うテンプレート・ソリューションを使用することです。心に浮かぶカップルは、Handlebars、Pure、またはUnderscore Templatesです。

それ以外の場合、このようなものが動作するはずです：

clonedDiv.find("." + key2).text(value)

また

@andreasはそれを回避しようと、IDのコピーに関する権利でした。

出典

2012-03-30 02:59:36

ありがとう - これも動作します！私は投票をしようとしています...しかし、それは "15の評判が必要"です。私== newb。 haha、thanks。 –

:) –

<script type="text/javascript"> 
    $(document).ready(function() { 
    makeClone(); 

}); 
function makeClone() { 
    for (i = 0; i < 5; i++) { 
     var cloneing = $('.divclone').clone(); 
     $('#container').append(cloneing.removeClass().attr("id",'new'+i)); 
    } 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="container" > 
<div class="divclone"> 
this is it 
</div> 
</div>

出典

2012-03-30 04:43:51

私はあなたがクローンdivのために異なるIDを持っている今、このようにすることができますし、あなたが望むように操作することができますように願っています。 –

チップのおかげで！ –

JQuery - Clonedオブジェクトの要素の値を編集する方法は？

答えて

関連する問題