3

私はこのようなhtml構造を持っています。

<div id='mydiv'> 
   <span class="tobecloned">  some heavy dom <br/> </span>
   <span class="tobecloned">  some heavy dom  <br/></span>
   <span class="tobecloned" id="last">  last some heavy dom  <br/></span>
</div>

ここで、span.tobeclonedこのクローンを最後に変更してクローンを作成し、最後の変更後にすべての変更されたクローン インスタンスを複数回挿入しますspan.tobecloned。

変更と挿入は for ループで行われます。次のようなことを試みています。

lastSpan = $('.tobecloned').last();
cloneHtml = $('.tobecloned').last().clone();
for (i = 0; i < 4; i++) {
    // Here I am making enough changes in cloneHtml
   console.log(i);
   cloneHtml.attr('status', i + 1);
   cloneHtml.insertAfter($('.tobecloned').last());
 }

上記のループは 4 回実行されますが、複製された要素は 1 回だけ追加されます。これは問題を再現するためのデモですhttp://jsfiddle.net/illumine/SN4rr/

どうすればこれを修正できますか?

forまた、ループに新しい属性を追加していることにも注意してください。実際のアプリケーションでは、1 または 2 だけでなく、より多くの属性を変更します。

それを行うより良い方法はありますか？

4

5 に答える 5

3

あなたのforループでcloneHtmlは、jQuery オブジェクトです。何度かやってみるinsertAfter()と勝手に動いてしまいます。.clone()すべての編集の前に、ループ内で使用します。

lastSpan = $('.tobecloned').last();
for (i = 0; i < 4; i++) {
    // Here I am making enough changes in cloneHtml
    console.log(i);
    cloneHtml = lastSpan.clone();
    cloneHtml.attr('status', i + 1);
    cloneHtml.insertAfter($('.tobecloned').last());
}

編集：申し訳ありませんが、ここで2回複製しています...修正。

于 2013-09-10T13:42:46.793 に答える
1

要素を複製すると、新しい要素が作成されるため、それを追加すると、一度しか追加できません。再度追加すると、同じ要素が追加されるだけで、複製はされません。

追加するたびに新しいクローンを作成します...

lastSpan = $('.tobecloned').last();
for (i = 0; i < 4; i++) {
   cloneHtml = $('.tobecloned').last().clone();
    // Here I am making enough changes in cloneHtml
   console.log(i);
   cloneHtml.attr('status', i + 1);
   cloneHtml.insertAfter($('.tobecloned').last());
}
于 2013-09-10T13:43:27.233 に答える