[英]Create an element and append it to multiple elements using jQuery
我试图创建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个容器,而不能同时附加两个。 代码有什么问题?
我希望它足够清晰
发现错误后,错误非常简单。 您正在创建jQuery对象图像$("<img/>")
。
您在for
循环中迭代了3次
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,因为Objects通过引用起作用。
尝试直接附加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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.