Structure élément HTML affectant le clonage

Question

Donc, je bande d'éléments à l'intérieur des éléments parents:

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

Aussi, j'ai élément séparé.Parent dans lequel je joins .copyHere éléments pour correspondre à la quantité de .copyFrom éléments

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

Aaaalso, .copyHere intérieur I clone tous les éléments séparés .copyThese

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

Maintenant, le problème est:

Pour une raison quelconque, si .Parent est ci-dessous tous les éléments .copyFrom Les .copyThese éléments sont clonés en très bien.

Mais .. Si .Parent élément est ci-dessus Les .copyFrom éléments, le clonage des .copyThese éléments se détraque.

Je dois avoir l'élément .Parent au-dessus et au-dessous. (sans problèmes de clonage étranges.)

jsFiddle:

http://jsfiddle.net/lollero/mZhUG/2/ - Au-dessus - correct

http://jsfiddle.net/lollero/mZhUG/3/ - Ci-dessous - problème

Answer 1

Il est parce que vous ajoutez une nouvelle .copyThese élément à chaque itération.

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

Vous clonez l'élément nth, mais vous avez ajouté n éléments ci-dessus, de sorte que même si votre indexeur incrémente vous êtes toujours le clonage du même 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)); 
}); 

changement à cela et cela fonctionne:

copyThese = $('.copyThese'); 

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

ne voyez-vous la différence? Je ne l'explique peut-être pas très bien mais j'espère que vous pouvez voir le problème.

Answer 2

vous devez faire:

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

parce que vous ajoutez .copyThese éléments à chaque itération et de garder le clonage du même élément.Cela ne se produit pas si vous ajoutez les éléments après celui déjà présents dans le Royaume et donc le problème est présent seulement si .parent est préfixé

violon ici:

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