jQuery如何将多个img src附加到数组中

Question

我的jQuery/JS设置如下，在文档加载时查找所有的img src并将它们推送到一个数组中：

var sliderImg = [];
sliderImg.push($('.thumbnail').children('img').attr('src'));

然后我有一段代码，在点击事件中弹出数组：

$('.thumbnail').each(function() {
$(this).click(function() {
    alert(sliderImg);
});
});

然而，它只添加了第一个img src路径，有没有办法添加所有的路径呢？

谢谢！

- user3927582

Answer 1

你可以使用each;

$('.thumbnail').children('img').each(function() {
  sliderImg.push($(this).attr('src');
});

- keune

---

你知道有没有一种方法可以获取整个HTML而不仅仅是它的属性吗？.html()似乎没有返回任何东西！ - user3927582

如果img元素的父元素不适合此操作，您可以使用以下技巧：http://jsfiddle.net/keune/ypdyw60k/，只需将`$(#x)`选择器更改为`$(this)`即可。 - keune

谢谢Keune，让我找到了正确的方向 - 我只需要在img html中包装src：sliderImg.push('<img src="' + $(this).attr('src') + '" />'); - user3927582

你也可以使用map()函数。 - Popnoodles

Answer 2

attr方法在作为getter使用时，返回集合中第一个元素的属性。如果您需要获取所有属性的数组，则必须循环遍历所有元素。您可以使用each方法或更方便的map方法：

var sliderImg = $('.thumbnail').children('img').map(function() {
    return this.src;
}).get();

- dfsq

Answer 3

根据 .attr() 文档，获取匹配元素集中的第一个元素的属性值。因此$('.thumbnail').children('img').attr('src')只返回第一张图片的源文件路径。

你可以使用.each()来迭代图片并逐个推送源文件路径。

var sliderImg = [];
$('.thumbnail').children('img').each(function() {
    sliderImg.push($(this).attr('src'));
});

- Volune