проблема appendChild внутри цикла

Я использую следующий код для создания слайдера изображения с функцией всплывающего окна для отображения увеличенной версии. Здесь для изображений с обзором 360 я добавляю накладываемое изображение.

$('.imageSet').each(function(){
    $(this).css({left : left+'%'});
    var mainImgWrapper = document.createElement("DIV");
    var mainImg = document.createElement("IMG");
    mainImg.src = $(this).attr('data-big');
    mainImgWrapper.id = $(this).attr('data-img-id');
    var orbitImg = document.createElement("IMG");
    orbitImg.src = "/base/media/img/icons/rotate.png";
    orbitImg.className = 'orbitIcon';
    if($(this).hasClass('orbitView')){
        mainImgWrapper.className = 'mainImage orbitView clickable';
        mainImgWrapper.appendChild(orbitImg);
    }else{
        mainImgWrapper.className = 'mainImage clickable';
    }
    mainImgWrapper.style.left = 'calc('+(imgCount*100)+'% + '+imgCount+'px)';
    mainImgWrapper.appendChild(mainImg);
    $('#mainImages').append(mainImgWrapper);

    var popImgWrapper = document.createElement("DIV");
    var popImg = document.createElement("IMG");
    popImg.src = $(this).attr('data-big');
    popImgWrapper.dataset.imgId = $(this).attr('data-img-id');
    if($(this).hasClass('orbitView')){
        popImgWrapper.className = 'popImage orbitView';
        popImgWrapper.appendChild(orbitImg);
    }else{
        popImgWrapper.className = 'popImage';
    }
    popImgWrapper.style.left = (imgCount*100)+'%';
    popImgWrapper.appendChild(popImg);
    $('#imagePopupView').append(popImgWrapper);
    imgCount++;
    left = left + 25.5;
});

Когда .imageSet имеет класс «orbitView», я добавляю orbitImg к mainImgWrapper и делаю то же самое с popImgWrapper. Но orbitImg добавляется только к popImgWrapper. Я не могу найти никаких проблем с кодом или в среде выполнения. Может я упускаю что-то, чего я не могу увидеть сам.


html jquery dom appendchild
person Upul Dissanayake    schedule 31.08.2018    source источник
comment
Не могли бы вы предоставить мне jsfiddle? Я хотел бы изучить это   -  person Lesleyvdp    schedule 31.08.2018
comment
@Lesleyvdp Мне удалось найти проблему. Пожалуйста, проверьте мой ответ. Спасибо за ваши усилия, чтобы помочь мне :)   -  person Upul Dissanayake    schedule 31.08.2018
comment
w3schools.com/jsref/met_node_clonenode.asp   -  person sertsedat    schedule 31.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел проблему здесь. Что касается стандартов HTML, вы не можете добавить узел html дважды. Если вы сделаете это, будет выполнена только последняя попытка. Причина в том, что если вы случайно добавили идентификатор в узел html, и если HTML позволяет вам добавить один и тот же узел в качестве дочернего несколько раз, он будет повторять один и тот же идентификатор несколько раз. Вы можете увидеть это в примере из следующих двух скрипок. Как это переопределяет попытку добавить один и тот же узел в качестве дочернего и как это работает, когда вы добавляете разные узлы. Поэтому, если вам нужно добавить что-то в цикл, вам нужно каждый раз создавать новый узел. А в моем случае мне даже пришлось дважды добавить один и тот же узел внутри цикла. В итоге я создал два новых узла каждый раз, когда прохожу цикл.

Один и тот же дочерний элемент, добавленный дважды, работает только для второго div

var mainImgWrapper = document.createElement("DIV");
mainImgWrapper.style.width = 100+'px';
mainImgWrapper.style.height = 100+'px';
mainImgWrapper.style.background = 'red';

var secondImgWrapper = document.createElement("DIV");
secondImgWrapper.style.width = 100+'px';
secondImgWrapper.style.height = 100+'px';
secondImgWrapper.style.background = 'green';

var appendChild = document.createElement("IMG");
appendChild.src = 'https://images.pexels.com/photos/457702/pexels-photo-457702.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';
appendChild.width = 100;

mainImgWrapper.appendChild(appendChild);
secondImgWrapper.appendChild(appendChild);

document.body.appendChild(mainImgWrapper);
document.body.appendChild(secondImgWrapper);

Различные добавленные дочерние элементы работают для обоих div

var firstImgWrapper = document.createElement("DIV");
firstImgWrapper.style.width = 100+'px';
firstImgWrapper.style.height = 100+'px';
firstImgWrapper.style.background = 'red';

var secondImgWrapper = document.createElement("DIV");
secondImgWrapper.style.width = 100+'px';
secondImgWrapper.style.height = 100+'px';
secondImgWrapper.style.background = 'green';

var firstChildImg = document.createElement("IMG");
firstChildImg.src = 'https://images.pexels.com/photos/457702/pexels-photo-457702.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';
firstChildImg.width = 100;

var secondChildImg = document.createElement("IMG");
secondChildImg.src = 'https://images.pexels.com/photos/457702/pexels-photo-457702.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';
secondChildImg.width = 100;

firstImgWrapper.appendChild(firstChildImg);
secondImgWrapper.appendChild(secondChildImg);

document.body.appendChild(firstImgWrapper);
document.body.appendChild(secondImgWrapper);

person Upul Dissanayake    schedule 31.08.2018