Using jQuery to get data attribute values with .each()

Question

I have the following HTML with data attributes - I want to write some jQuery that will loop through the HTML and collect the data attributes and put them into an array - could anyone assist as I'm getting an error.

I am trying to use the data() attribute - can you see what I'm doing wrong?

<span class="winners" data-userid="123" data-position="1" data-fullname="neil">
<span class="winners" data-userid="234" data-position="2" data-fullname="Ron">
<span class="winners" data-userid="421" data-position="3" data-fullname="Philip">

var multi = $('.winners');
var winners_array = [];

$.each(multi, function (index, item) {
    winners_array.push( {name: 'fullname', value: item.data('fullname')} );  
});

console.log(winners_array);

Console error:

item.data is not a function

adeneo · Accepted Answer · 2014-01-23 11:43:55Z

39

item is not a jQuery object, the arguments for each are the index and the native DOM element

var multi = $('.winners');
var winners_array = [];

$.each(multi, function (index, item) {
    winners_array.push( {name: 'fullname', value: $(item).data('fullname')} );  
});

using a map would be easier

var winners_array = $.map($('.winners'), function(el) {
     return {name: 'fullname', value: $(el).data('fullname')}
});

answered Jan 23, 2014 at 11:43

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

Vinay · Accepted Answer · 2014-01-23 11:54:22Z

6

I understand you should use $(item), instead data only. Kindly find the code below:

<script type="text/javascript">
        var multi = $('.winners');
        var winners_array = [];

        $.each(multi, function (index, item) {
            winners_array.push( {name: 'fullname', value: $(item).data('fullname')} );  
        });

        console.log(winners_array);
    </script>

answered Jan 23, 2014 at 11:54

Vinay

3251 silver badge8 bronze badges

Comments

Jake · Accepted Answer · 2014-01-23 11:45:16Z

3

Use item.dataset.fullname instead.

var multi = $('.winners');
var winners_array = [];

$.each(multi, function (index, item) {
    winners_array.push( {name: 'fullname', value: item.dataset.fullname} );  
});

console.log(winners_array);

answered Jan 23, 2014 at 11:45

Jake

6901 gold badge7 silver badges18 bronze badges

2 Comments

adeneo Over a year ago

This is only supported in IE11, and generally isn't supported in older browsers at all. You'd be better of using getAttribute('data-fullname'). Also note that jQuery's data() stores data internally, so if the value is set or changed with data() this won't work either.

Jake Over a year ago

Are you sure? I just verified it in the Chrome console.

Collectives™ on Stack Overflow

Using jQuery to get data attribute values with .each()

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related