Question

我使用div创建了一个框。

<div class="panel" style="display:inline; float:left;position: relative; width: 140px; height: 200px; border:solid 2px; border-color: red;cursor: pointer;"></div>

我尝试使用jQuery克隆元素并将克隆附加到自身，但它不能按预期工作。

for (; i < noC; i++) {
    $(".panel").clone().appendTo($(".panel"));
}

我希望在最后一个框之后添加每个框。

[]     // noC = 1
[][]   // noC = 2
[][][] // noC = 3

相反，每个新框都会插入上一个框内。

[]     // noC = 1
[[]]   // noC = 2
[[[]]] // noC = 3

我该怎么做？

Answer 1

noC = 3;
for(i= 0; i < noC;i++) {
    $("#panel").append(function(){     
        return $("#panel").find('div').length==0?$(this).clone(): $("#panel").find('div:first').clone();
    });
}

直播演示请看此链接：http://jsfiddle.net/nanoquantumtech/PBBNe/ //或

     noC = 3;
    for(i= 0; i < noC;i++) {
    $("body").append($("#panel:first").clone());        
     }

直播演示，请参阅此链接：http://jsfiddle.net/nanoquantumtech/HvnbU/

Answer 2

Check this out。不要忘记您可以在追加，前置，插入其他元素之前修改克隆元素。这是片段：

noC = 5;
for(var i = 0; i < noC; i++) {
    var panel = $('.panel').filter(':first').clone();
    panel.text('panel ' +i);
    $('.panel').filter(':last').after(panel);
}

我使用filter：last以便将克隆元素放在最后一个元素旁边:-D

Answer 3

好像你有一些语法错误，可能正试图克隆错误的东西。

var i = 0;
var noC = 3;
for(i=0; i < noC; i++){
    $('#panel').clone().appendTo('.a');
}

请注意，我已将其从.panel更改为#panel

Answer 4

检查一下。我认为您正在尝试克隆panel：

fiddle

Answer 5

var noC = 2;
    cloned = $('.panel').clone();
for(i= 0; i < noC;i++) {
    cloned.appendTo($(".panel"));
}

<强> DEMO

如果您想要多次，可以设置功能：

function appendClones(target, times) {
    var noC = times;
        cloned = $(target).clone();
    for(i= 0; i < noC;i++) {
        cloned.appendTo($(target));
    }
}

调用该函数：appendClones('.panel', 3);

注意：将ID #panel更改为班级.panel。因为不允许多个id。

Answer 6

我用“之后”http://api.jquery.com/after/

解决了这个问题

在此处显示我的示例http://jsfiddle.net/gastonnina/Mf2dE/2/

<script>
function cloname(that){
    var li = $(that).closest('li');
    var clon = li.clone();
clon.html(clon.html()+" clonado");
li.after( clon );
}     
</script>
<ul>
    <li>Contenido1 <a href="javascript:void(0)" onclick="javascript:cloname(this);">CLONA</a></li>
</ul>

Answer 7

上面的答案我可以看到主要是按类引用元素，所以我认为这更灵活一些：

const cloneAsSibling = element => {
  element.clone().insertAfter(element);
}

我在项目的 .each() 循环中使用了它。

如何克隆jQuery对象并将其添加为兄弟姐妹？

7 个答案: