Javascript 使用jQuery创建一个元素并将其附加到多个元素
我正在尝试创建2个div,其中包含一些图像,相同的图像和两个看起来相同的logo条带-都是动态的 这是我的代码:Javascript 使用jQuery创建一个元素并将其附加到多个元素,javascript,jquery,html,dynamic,append,Javascript,Jquery,Html,Dynamic,Append,我正在尝试创建2个div,其中包含一些图像,相同的图像和两个看起来相同的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'})
//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附加到一个容器,而不能同时附加到两个容器。
代码有什么问题
我希望它足够清晰一旦你发现它,错误就很简单了。您正在创建一个jQuery对象映像$ 在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
}
它最初出现在元素中,但很快就转到了B,因为对象是通过引用工作的
尝试直接附加html或克隆de DOM元素
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 !!!
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
}