Создайте элемент и добавьте его в несколько элементов, используя jQuery

Question

im пытается создать 2 divs, которые будут содержать несколько изображений, те же изображения (2 логотипа, которые выглядят одинаково) - все динамически.

это мой код:

//those are my vars 
var logos = ['logo1','logo2','logo3']; 
var $stripLogo; //will use later to create the images 
var $stripContainerA = $('<div>', {class: 'stripContainer', id: 'stripA'}); //Container 1 
var $stripContainerB = $('<div>', {class: 'stripContainer', id: 'stripB'}); //Container 2 

//and this is how i append it 
$('#logosStrip').append($stripContainerA); //Insert container 1 into an existing element 
$('#logosStrip').append($stripContainerB); //Insert container 2 into an existing element 

for(var i = 0; i < logos.length; i++) { 
    $stripLogo = $('<img/>', {class: 'stripLogo', src: 'img/logos/' + logos[i] }); //Create an image 

    $stripContainerA.append($stripLogo); //append image to container 1 
    $stripContainerB.append($stripLogo); //append image to container 2 
} 

вещь, кажется, что это может только добавить в IMG 1 контейнера, а не оба. что не так с кодом?

я надеюсь, что его ясно прийти

Answer 1

ошибка действительно просто, как только вы заметили это. Вы создаете изображение объекта jQuery $("<img/>").

Вы итерацию три раза в вашем for цикле

var logos = ['logo1','logo2','logo3']; // Three keys 

for(var i=0; i < logos.length; i++) { // Three times 
    var $img= $('<img/>',{src:"bla"}); // Three times 

} 

означает, будет создано только три изображения объекта.
Теперь давайте рассмотрим один цикл итерации:

var $img= $('<img/>',{src:"bla"}); // ONE! in-memory image is created. 
$A.append($img);     // append it to A 
$B.append($img);     // no, wait....now append it to B !!! 

он впервые появился в элементе, но не быстро переходит в B Причина Объекты работы в качестве ссылки.

Попробуйте добавить html непосредственно или клонировать элемент DOM.

for(var i = 0; i < logos.length; i++) { 
    $stripContainerA.append('<img class="stripLogo" src="img/logos/' + logos[i] + ' />"); 
    $stripContainerB.append('<img class="stripLogo" src="img/logos/' + logos[i] + ' />"); 
} 

// OR 
for(var i = 0; i < logos.length; i++) { 
    $stripLogo = $('<img/>', {class: 'stripLogo', src: 'img/logos/' + logos[i] }); //Create an image 

    $stripContainerA.append($stripLogo.clone()); //append image to container 1 
    $stripContainerB.append($stripLogo.clone()); //append image to container 2 
}