创建一个元素，并将其附加到使用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 
}