如何修改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修改此克隆的对象，并在last之后多次插入所有修改后的克隆实例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());
}