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

我怎样才能解决这个问题？

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

有更好的方法吗？

4

5 回答 5

5 
var $lastSpan = $('.tobecloned').last();
for (i = 0; i < 4; i++) {
    var $clone = $lastSpan.clone();
    $clone.attr('status', i + 1)
          .appendTo($lastSpan.parent());
}
于 2013-09-10T13:47:39.863 回答
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());
}

编辑：对不起，在这里克隆两次......已修复。

于 2013-09-10T13:42:46.793 回答
1

这是你想要做的吗？

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

jsFiddle 在这里：http: //jsfiddle.net/vL9YU/

于 2013-09-10T13:44:28.037 回答
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 回答
0

试试这个：- http://jsfiddle.net/aidioo7/SN4rr/4/

JS：-

lastSpan = $('.tobecloned').last();

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