jQuery的每個函數以HTML圖像中的屬性填充數組

Question

我正在嘗試從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屬性。 我不確定如何獲取每個函數以遍歷所有元素並將其推入數組。

Answer 1

您可以嘗試這樣的事情：

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

在each代碼中，您都用$('img')重新選擇整個組，因此它只會將THAT Selection的第一個添加到您的數組中。

要么

如果您不使用jQuery進行其他任何操作，則可以在純Javascript中執行以下操作：

document.addEventListener('DOMContentLoaded', getImgAttr);

var source = [];

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

Answer 2

您的問題是$('img').attr('src')將始終返回元素集合中第一個元素的值。

如注釋中所指出的，您需要查看循環中的特定實例

您可以執行此操作的另一種方法是使用map() ，它將為您創建數組

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

DEMO

Answer 3

您需要在循環內使用'this'來引用圖像，否則您將獲得對第一個'img'標簽的引用。

應該是這樣的：

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

Answer 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'); });

jQuery的每個函數以HTML圖像中的屬性填充數組

問題描述

4 個解決方案

解決方案1
1 2015-02-12 20:00:58

解決方案2
1 2015-02-12 20:05:56

解決方案3
0 2015-02-12 20:03:36

解決方案4
0 2015-02-12 20:07:10

jQuery的每個函數以HTML圖像中的屬性填充數組

問題描述

4 個解決方案

解決方案1 1 2015-02-12 20:00:58

解決方案2 1 2015-02-12 20:05:56

解決方案3 0 2015-02-12 20:03:36

解決方案4 0 2015-02-12 20:07:10

解決方案1
1 2015-02-12 20:00:58

解決方案2
1 2015-02-12 20:05:56

解決方案3
0 2015-02-12 20:03:36

解決方案4
0 2015-02-12 20:07:10