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更新