Create an array of objects by capturing a data attribute

Question

I have made a fiddle. http://jsfiddle.net/Zfaf6/

I am experiementing with arrays, but only seem to output the first object.

Can any please advise, thanks.

My 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);

});

My script

<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/

Matt · Accepted Answer · 2013-02-08 11:05:20Z

5

jQuery's attr() will, as a "getter" (and per the docs) return the value of the first element matched; which is why you're only seeing one.

Either iterate over the match objects using each(), or use 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(' '));
});

answered Feb 8, 2013 at 11:05

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Justus Romijn Over a year ago

I think the map() is suited perfectly for this situation.

NM Pennypacker Over a year ago

Good up! Can't believe I didn't think of map.

Roko C. Buljan · Accepted Answer · 2013-02-08 11:06:29Z

1

LIVE DEMO

var downloads = [] ;

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

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

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

});

answered Feb 8, 2013 at 11:06

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Comments

Lee Taylor · Accepted Answer · 2013-02-08 11:07:23Z

1

calling attr() of a set will only return the first attr(). Also, use data() as it's easier to read.

So, the code just creates an empty array, then using each we push each item's download value into the array. The rest of your code is the same.

$("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);
});

answered Feb 8, 2013 at 11:07

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

2 Comments

Joshc Over a year ago

Thanks also. And the tip on data, always forget about that.

Joshc Over a year ago

and the updating my title :-)

mikakun · Accepted Answer · 2013-02-08 11:39:39Z

1

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

edited Feb 8, 2013 at 11:39

answered Feb 8, 2013 at 11:08

mikakun

2,2832 gold badges18 silver badges25 bronze badges

3 Comments

Joshc Over a year ago

You've trimmed my favourite answer down even more!

Joshc Over a year ago

Though its a bit weird - not working for some reason... jsfiddle.net/Zfaf6/4

mikakun Over a year ago

typo : download') ) extra bracket

Collectives™ on Stack Overflow

Create an array of objects by capturing a data attribute

4 Answers 4

2 Comments

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related