要素を複数回クローニングする

Question

divを親とするli elementは、idholderです。 liを複数回クローンし、すべてのクローンを親としてholder divにして、data-idsを変更する必要があります。私の階層は次のようになります。

<div id="holder"> 
    <li data-id=0 class="element"> 
     //other nodes 
    </li> 
</div> 

にはどうすればli elementのクローンを作成することができますし、変更するよりも、それは私が得るdata-idです：

<div id="holder"> 
    <li data-id=0 class="element"> 
     //other nodes 
    </li> 
    <li data-id=1 class="element"> 
     //other nodes 
    </li> 
    <li data-id=2 class="element"> 
     //other nodes 
    </li> 
    <li data-id=3 class="element"> 
     //other nodes 
    </li> 
    <li data-id=4 class="element"> 
     //other nodes 
    </li> 
    <li data-id=5 class="element"> 
     //other nodes 
    </li> 
</div> 

- デヴィッド

Answer 1

だけcloneとattrを使用します。

var holder, li, clone, counter; 
holder = $("#holder"); 
li = holder.find("li:first"); 
counter; 
for (counter = 1; counter <= 5; ++counter) { 
    clone = li.clone(); 
    clone.attr("data-id", counter); 
    clone.appendTo(holder); 
} 

Answer 2

これらの線に沿って何かが動作するはずです：

var clone = $("#holder > li").last().clone(); 
clone.data("id", parseInt(clone.data("id"), 10) + 1); 
$("#holder").append(clone); 

最後のものへの参照を取得しますli子は#holderとclonesです。次に、data-id属性の現在の値に1を加算し、クローンを#holderに追加します。

しかし、これは実際に要素の属性の値を変更しません（DOMを検査した場合、クローンは元の要素と同じdata-idの値を持つように見えます）。新しい値が要素に関連付けられています.jQuery dataメソッドを使用してこの値を後で取得する場合は問題ありません。そうでない場合は、dataの代わりにattrを使用して値を設定する必要があります。

Answer 3

ここでは、迅速かつ汚いソリューションです。また

http://jsfiddle.net/Epzt9/7/

- と私は他の誰がこれを言及していない驚いている - あなたは含みます要素は<ul>でなければなりません。<div> - <li>タグは単独では存在しません。リストに属する必要があります。