Question

所以，我在父元素中有很多元素：

<div class="copyFrom">
    <div class="copyThese">copyThese1</div>
</div>
<div class="copyFrom">
    <div class="copyThese">copyThese2</div>
</div>

另外，我有单独的 .Parent元素，其中我追加.copyHere元素以对应.copyFrom元素的数量

<div class="Parent">
    <div class="copyHere"></div>
    <div class="copyHere"></div>
</div>

Aaaalso，Inside .copyHere我克隆了每个单独的.copyThese元素

<div class="Parent">
    <div class="copyHere">
        <div class="copyThese">copyThese1</div>
    </div>
    <div class="copyHere">
        <div class="copyThese">copyThese2</div>
    </div>
</div>

现在，问题是：

出于某种原因，如果.Parent 以下所有.copyFrom个元素，.copyThese元素都会被克隆。

但..如果.Parent元素 .copyFrom元素，则.copyThese元素的克隆会变得混乱。

我需要在上方和下方都有.Parent元素。（没有奇怪的克隆问题。）

的jsfiddle：

http://jsfiddle.net/lollero/mZhUG/2/ - 上方 - 更正

http://jsfiddle.net/lollero/mZhUG/3/ - 下方 - 问题

Answer 1

你应该这样做：

  var copyThese = $('.copyFrom .copyThese');

因为您在每次迭代时都添加.copyThese个元素并继续克隆相同的元素。如果在dom中已存在的元素之后添加元素，则不会发生这种情况，因此只有在.parent前置时才会出现问题

在这里小提琴：

http://jsfiddle.net/mZhUG/4/

Answer 2

这是因为您每次迭代都要添加一个新的.copyThese元素。

copyThese.eq( copyHere ).clone().appendTo( $(this) );

您正在克隆nth元素，但上面添加了n个元素，因此即使您的索引器正在递增，您仍然会克隆相同的div。

$('.copyHere').each(function(){
    var copyHere = $(this).index();

    // you re-initialise this array within each loop, 
    // elements are added to the start of the array each time
    var copyThese = $('.copyThese');

    copyThese.eq( copyHere ).clone().appendTo( $(this) );
});

更改为此并且有效：

copyThese = $('.copyThese');

$('.copyHere').each(function(){
    var copyHere = $(this).index();
    copyThese.eq( copyHere ).clone().appendTo( $(this) );
});

你看到了区别吗？我可能不会很好地解释它，但希望你能看到问题。

影响元素克隆的Html结构

2 个答案: