創建一個元素，並將其附加到使用jQuery的多個元素

Question

即時嘗試創建2個div，其中包含幾張圖片，相同的圖片（兩張圖片看起來相同） - 全部都是動態的。

這是我的代碼：

//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 !!! 

它第一次出現在A元素，但不是迅速進入B事業參照對象。

嘗試直接追加html或克隆de 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 
}