prepend jQuery数组

Question

我有图像（url）存储在jQuery数组中的源代码。我想将数组中的每个源前置到它自己的标记集合中。我有这样的事情：

var images = [link1,link2,link3,etc,etc]; 

$('.gallery').prepend(); 

，但我不知道要放什么东西在.prepend().

我需要的东西里面每个单独的图像是这样的：

<label class="align"><img class="thumbnail" src=""+images+""/></label> 

我怎么去对这个？

Answer 1

您将创建一个简单的模板并将该模板（DOM元素）添加到您的图库类中。

var images = [link1,link2,link3,etc,etc]; 
for(var i=0; i<images.length; i++){ 
    var temp = '<label class="align"><img class="thumbnail" src="'+images[i]+'"/></label>' 
    $('.gallery').prepend(temp); 
} 

这是否适合您？

Answer 2

您可以映射在阵列上，并返回每个jQuery对象：

var images = ['link1','link2','link3','etc','etc']; 

$('.gallery').prepend(images.map(function(image){ 
    return $('<img class="thumbnail" />').src(image).wrap('<label class="align">').parent(); 
})); 

（参见为什么不只是做一个简单的HTML字符串my writeup，即使它可能会更容易。）

Answer 3

如果你使用jQuery可以循环通过与$.each()阵列和图像添加到HTML的字符串：

var images = ['link1','link2','link3','etc','etc']; 

var imagesHtml = ''; 
$.each(images, function(index,value){ 
    imagesHtml += '<label class="align"><img class="thumbnail" src="'+value+'" /></label>'; 
}); 
$('.gallery').prepend(imagesHtml); 

您可以将图像添加到每个循环的画廊，但更改DOM（简单：document/html）很昂贵，这样你就可以制作一个大字符串（这里不是html），并且只执行1个DOM更新