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

Question

我的jQuery / JS已设置好，以便在doc加载时它会查找所有img srcs并将它们推送到数组中：

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

然后我有代码在点击事件中提醒数组：

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

但是，它只添加了第一个img src路径，是否可以添加所有这些路径？

谢谢！

Answer 1

您可以使用each;

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

Answer 2

根据.attr() documentation

  

获取匹配元素集中第一个元素的属性值

所以$('.thumbnail').children('img').attr('src')只返回第一张图片的来源。

您可以使用.each()来迭代图像并逐个推送源：

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

Answer 3

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

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