通过捕获数据属性创建对象数组

Question

我做了一个小提琴。 http://jsfiddle.net/Zfaf6/

我正在尝试使用数组，但似乎只输出第一个对象。

哪位大神可以指教一下，谢谢

我的 jquery

$("a.download-all").on('click', function () {

    var downloads = $('a[data-download]').attr('data-download');

    // This is the example output of the data in the variable...

    $('#varObj').html(downloads);

});

我的脚本

<div id="images">

    <a href="#" data-download="http://image.com/1.jpg"><img src="images/x.gif" alt=""/></a>
    <a href="#" data-download="http://image.com/2.jpg"><img src="images/x.gif" alt="" /></a>
    <a href="#" data-download="http://image.com/3.jpg"><img src="images/x.gif" alt=""/></a>
    <a href="#" data-download="http://image.com/4.jpg"><img src="images/x.gif" alt="" /></a>
    <a href="#" data-download="http://image.com/5.jpg"><img src="images/x.gif" alt=""/></a>
    <a href="#" data-download="http://image.com/6.jpg"><img src="images/x.gif" alt="" /></a>

<div>

<p><a href="#" class="download-all">Download all images</a></p>

<p id="varObj"></p>

http://jsfiddle.net/Zfaf6/

Answer 1

jQuery 的attr() 将作为“getter” (and per the docs) 返回匹配的 first 元素的值；这就是为什么你只看到一个。

要么使用each()迭代匹配对象，要么使用map()；

$("a.download-all").on('click', function () {

    var downloads = $('a[data-download]').map(function () {
        return $(this).attr('data-download');
    });

    // This is the example output of the data in the variable...
    $('#varObj').html(downloads.get().join(' '));
});

Answer 2

LIVE DEMO

var downloads = [] ;

$("a.download-all").on('click', function () {

    $('a[data-download]').each(function(){   
        downloads.push( $(this).attr('data-download') );        
    });

    $('#varObj').html(downloads);

});

Answer 3

调用 set 的 attr() 只会返回第一个 attr()。另外，请使用data()，因为它更易于阅读。

因此，代码只是创建了一个空数组，然后使用each 我们将每个项目的download 值推送到数组中。您的其余代码是相同的。

$("a.download-all").on('click', function () 
{
    var downloads = [];

    $('a[data-download]').each(function()
    {
        downloads.push( $(this).data('download') );
    });

    // This is the example output of the data in the variable...

    $('#varObj').html(downloads);
});

Answer 4

var downloads = $('a[data-download]').map(function(){   
   return  $(this).data('download');        
});
$("#varObj").html(downloads.join("-"));