Javascript JQuery使用HTML图像中的属性填充数组的每个函数

我试图从HTML文档中的一系列img标记加载一个填充了src属性的数组

HTML:

---

控制台的输出是一个包含10个元素的数组，但仅使用第一个img属性。我不知道如何让each函数遍历所有元素并将它们推送到数组中。

您可以尝试以下方法：

var source = [];
$('img').each(function() {
  source.push( this.getAttribute('src') );
});

document.addEventListener('DOMContentLoaded', getImgAttr);

var source = [];

function getImgAttr() {
  var imgs = document.querySelectorAll('img');
  [].forEach.call(imgs, function( img ) {
     source.push( img.src);
  });
} 

$('img').each(function(attr) {
    source.push($(this).attr('src'))
});

$('img').each(function(i, img) {
    source.push($(img).attr('src'));
    // alternatively -> source.push($(this).attr('src'));
});

在您的

每一个
代码中，您使用
$（'img'）
重新选择整个组，因此它只是将该选择中的第一个添加到您的数组中

或

如果您不使用jQuery进行其他任何操作，您可以直接使用如下javascript：

var source = [];
$('img').each(function() {
  source.push( this.getAttribute('src') );
});

document.addEventListener('DOMContentLoaded', getImgAttr);

var source = [];

function getImgAttr() {
  var imgs = document.querySelectorAll('img');
  [].forEach.call(imgs, function( img ) {
     source.push( img.src);
  });
} 

$('img').each(function(attr) {
    source.push($(this).attr('src'))
});

$('img').each(function(i, img) {
    source.push($(img).attr('src'));
    // alternatively -> source.push($(this).attr('src'));
});

您需要在循环内使用“this”来引用图像，否则您将获得对第一个“img”标记的引用

应该是这样的:

var source = [];
$('img').each(function() {
  source.push( this.getAttribute('src') );
});

document.addEventListener('DOMContentLoaded', getImgAttr);

var source = [];

function getImgAttr() {
  var imgs = document.querySelectorAll('img');
  [].forEach.call(imgs, function( img ) {
     source.push( img.src);
  });
} 

$('img').each(function(attr) {
    source.push($(this).attr('src'))
});

$('img').each(function(i, img) {
    source.push($(img).attr('src'));
    // alternatively -> source.push($(this).attr('src'));
});

您的问题是
$（'img'）.attr（'src'）
将始终返回元素集合中第一个元素的值

正如注释中指出的，您需要查看循环中的特定实例

另一种方法是使用
map（）
，它将为您创建数组

var source = $('img').map(function(){
   return $(this).attr('src');
}).get();

回调函数需要接受第二个参数

第一个参数是数组的当前索引，第二个参数是该索引处的对象

您也可以使用上面建议的关键字
this

根据我的回答，您的代码如下所示：

var source = [];
$('img').each(function() {
  source.push( this.getAttribute('src') );
});

document.addEventListener('DOMContentLoaded', getImgAttr);

var source = [];

function getImgAttr() {
  var imgs = document.querySelectorAll('img');
  [].forEach.call(imgs, function( img ) {
     source.push( img.src);
  });
} 

$('img').each(function(attr) {
    source.push($(this).attr('src'))
});

$('img').each(function(i, img) {
    source.push($(img).attr('src'));
    // alternatively -> source.push($(this).attr('src'));
});

第二个选项是使用函数，您可能会喜欢并将尝试执行的操作放到一行中

var source = $.map($('img'), function(img) { return $(img).attr('src'); });

您需要在循环$（this.attr（'src'）中使用'this'，谢谢Juan，成功了！我打算发布这个jQuery版本，除了：
source.push（$（this.attr（'src'））