我正在尝试创建 2 个包含一些图像的 div,相同的图像(2 个看起来相同的 Logo 条) - 全部都是动态的。
这是我的代码:
//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 append 到 1 个容器,而不能同时 append 到两个容器。 代码有什么问题?
我希望它足够清楚
最佳答案
一旦你发现这个错误,它就非常简单了。您正在创建一个 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 元素中,因为对象通过引用工作。
尝试直接 append 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
}
关于javascript - 使用 jQuery 创建一个元素并将其 append 到多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26652771/