Question

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

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

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

但我不知道在.prepend().

中放什么

我需要在这样的内容中单独使用每个图像：

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

我该怎么做？

Answer 1

您可以映射数组并为每个数组返回一个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();
}));

（请参阅my writeup，了解为什么不做一个简单的HTML字符串，即使它可能更容易。）

Answer 2

您将创建一个简单的模板，并将该模板（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 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（简单：文档/ html）的更改是昂贵的，这样你就可以制作一个大字符串（此时它不是html）），并且只执行1次DOM更新

前置jQuery数组

3 个答案: