使用 jQuery 创建一个元素并将其附加到多个元素答案

【问题标题】：Create an element and append it to multiple elements using jQuery使用 jQuery 创建一个元素并将其附加到多个元素
【发布时间】：2014-12-26 11:32:20
【问题描述】：

我正在尝试创建 2 个 div，其中包含一些图像，相同的图像（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 个容器，而不是两者。代码有什么问题？

我希望它足够清楚

【问题讨论】：

标签： javascript jquery html dynamic append

【解决方案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
}

【讨论】：