预先添加 jQuery 数组答案

【问题标题】：Prepend jQuery array预先添加 jQuery 数组
【发布时间】：2015-02-12 06:18:59
【问题描述】：

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

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

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

但我不知道在.prepend(). 中添加什么

我需要在这样的东西中单独放置每个图像：

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

我该怎么做？

【问题讨论】：

标签： javascript jquery arrays image prepend

【解决方案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 字符串，即使它可能更容易。）

【讨论】：

【解决方案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);
}

这能满足您的需要吗？

【讨论】：

支持一个简单的 JS 解决方案。正在为一个简单的变体更新我的答案，现在不需要。普通 JS 通常（很多）更快，尤其是简单的代码

【解决方案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 更新

【讨论】：