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

【问题标题】：JQuery each function to fill array with attributes from HTML imagesJQuery 每个函数用 HTML 图像中的属性填充数组
【发布时间】：2015-04-13 17:33:40
【问题描述】：

我正在尝试从我的 HTML 文档中的一系列 img 标签中加载一个填充了 src 属性的数组。

HTML：

<html>
<head>
<title>
    JQuery Slider
</title>
<link rel="stylesheet"  type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>

<body>
    <div id = "wrapper">
    <h1 class="dark-header">2014 Salt Lake Comic Con FanX</h1>
        <div id="background-img">
            <img src="img/img01.jpg"/>
        </div>
        <div>
            <img src="img/img02.jpg"/>
        </div>
                <div>
            <img src="img/img03.jpg"/>
        </div>
                <div>
            <img src="img/img04.jpg"/>
        </div>
                <div>
            <img src="img/img05.jpg"/>
        </div>
                <div>
            <img src="img/img06.jpg"/>
        </div>
                <div>
            <img src="img/img07.jpg"/>
        </div>
                <div>
            <img src="img/img08.jpg"/>
        </div>
        <div>
            <img src="img/img09.jpg"/>
        </div>
                <div>
            <img src="img/img10.jpg"/>
        </div>
    </div>


</body>
</html>

JQuery:

$(document).ready(function() {



    var source = new Array();


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



    console.log(source)

});//end document.ready

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

【问题讨论】：

你需要在循环$(this).attr('src')中使用'this'
谢谢胡安，成功了！

标签： javascript jquery arrays image each

【解决方案1】：

你可以试试这样的：

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

在您的 each 代码中，您使用 $('img') 重新选择整个组，因此它只会将第一个选择添加到您的数组中。

或

如果你不使用 jQuery 做其他事情，你可以像这样直接用 javascript 来做：

document.addEventListener('DOMContentLoaded', getImgAttr);

var source = [];

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

【讨论】：

我打算发布这个的 jQuery 版本，除了：source.push($(this).attr('src'));

【解决方案2】：

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

应该是这样的：

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

【讨论】：

【解决方案3】：

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

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

您可以这样做的另一种方法是使用map()，它将为您创建数组

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

DEMO

【讨论】：

【解决方案4】：

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

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

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

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

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

您可能喜欢的第二个选项并将您尝试做的事情放在一行上是使用jQuery map 函数...

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

【讨论】：