javascript - 如何修改 jquery html 克隆并在节点后多次插入？

Question

我有一个这样的 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 次，但只添加了一次克隆元素。这是重现问题的演示 http://jsfiddle.net/illumine/SN4rr/

我该如何解决这个问题？

另请注意，我在 for 循环中添加了新属性。在实际应用中，我将修改更多属性，而不仅仅是 1 或 2。

有更好的方法吗？

Answer 1

var $lastSpan = $('.tobecloned').last();
for (i = 0; i < 4; i++) {
    var $clone = $lastSpan.clone();
    $clone.attr('status', i + 1)
          .appendTo($lastSpan.parent());
}