Retrieve data attribute values for jQuery collection's elements

Question

This works for the first match:

 var attributeValue = $({selector}).data("myAttribute");

But if I want to get values for all elements selector matches, I do the following:

var attributes = [];
$.each($({selector})), function(k,v) { attributes.push($(v).data("myAttribute")); });

This feels stupid. Is there simpler way to get the data for all the elements?

Answer 1

I don't think there is a built-in way to make an array like you want. But you can certainly simplify the code a tiny bit with $().map():

var attributes = $({selector}).map( function( i, element ) {
    return $(element).data( 'myAttribute' );
});

Or if this is something that might be used in more than one place, you could make it a plugin:

$.fn.dataArray = function( name ) {
    return this.map( function( i, element ) {
        return $(element).data( name );
    });
};

and call it with this very simple code:

var attributes = $({selector}).dataArray( 'myAttribute' );

Answer 2

Inspired by Michael Geary's answer above, I have come up with a similar solution.

This is for anyone that wants to retrieve data attributes and create markup with those attributes.

Background: I wanted to retrieve data attributes from an element and create html markup on the fly for as many elements that are in the parent, using those data attributes in the same dynamic markup. This is what I came up with after reading this post. This was for an event timeline.

$({selector}).map(function() {
        var foo = $(this).data('foo');
        var bar = $(this).data('bar');
        $({anotherSelector}).append('<li><a href="#0" data-foo="'+foo+'">'+bar+'</a></li>');
});