影响元素克隆的 HTML 结构

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，在 .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) );
});

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