Структура HTML, влияющая на клонирование элементов - PullRequest
Новая
       7

Структура HTML, влияющая на клонирование элементов

3 голосов
/ 20 октября 2011

Итак, у меня есть группа элементов внутри родительских элементов: 

<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/ - Ниже - Проблема

Ответы [ 2 ]

3 голосов
/ 20 октября 2011

вы должны сделать: 

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

, потому что вы добавляете элементы .copyThese на каждой итерации и продолжаете клонировать один и тот же элемент.Этого не произойдет, если вы добавите элементы после того, который уже присутствует в dom, и поэтому проблема возникает только в том случае, если .parent добавлен

fiddle здесь:

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

2 голосов
/ 20 октября 2011

Это потому, что вы добавляете новый элемент .copyThese на каждой итерации.

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

Вы клонируете элемент nth, но вы добавили n элементов выше, поэтому даже если ваш индексатор увеличивается, вы все равно клонируете тот же div.1009 * 

$('.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) );
});

вы видите разницу?Возможно, я не очень хорошо объясняю это, но, надеюсь, вы увидите проблему.

...