0

我创建了一个使用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

我怎么做？

4

7 回答 7

2 
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/PBBBe/// 或

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

对于现场演示，请参阅此链接：http: //jsfiddle.net/nanoquantumtech/HvnbU/

于 2012-05-16T07:34:27.770 回答
1

看看这个。不要忘记您可以在追加、前置、插入其他元素之前修改克隆的元素。这是片段：

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

于 2012-12-12T10:18:49.147 回答
1

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

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

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

于 2021-01-08T07:26:13.750 回答
0

似乎您有一些语法错误，并且可能试图克隆错误的东西。

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

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

于 2012-05-16T06:56:30.113 回答
0

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

小提琴

于 2012-05-16T07:01:00.657 回答
0 
var noC = 2;
    cloned = $('.panel').clone();
for(i= 0; i < noC;i++) {
    cloned.appendTo($(".panel"));
}​

演示

如果需要多次，您可以设备一个功能：

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

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

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

于 2012-05-16T07:05:27.367 回答
0

我用“之后”解决了这个问题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>
于 2014-01-03T20:13:24.997 回答