Reading Data Attributes = Undefined?

Question

I have code that looks like this:

<ul class="effects-list">
   <li data-creative="1">Creative</li>
   <li data-uplifted="3">Uplifted</li>
   <li data-energetic="3">Energetic</li>
</ul>

Then Javascript to read the data attributes:

$(function() {

  var effectData = $('.effects-list li');
  var creative = effectData.data("creative");
  var uplifted = effectData.data("uplifted");
  var energetic = effectData.data("energetic");

  console.log(creative);
  console.log(uplifted);
  console.log(energetic);

});

I end up with this in the console log:

1
undefined
undefined

Why is the script reading the information in the first li element but not the second two?

What do I have wrong and how do I solve the problem?

Here is a fiddle with the code above. I am using jQuery 2.1.

Arun P Johny · Accepted Answer · 2014-05-09 06:10:05Z

5

Since you are using the getter version of data(), it will look only at the first element in the given set, which does not have the said data attributes.

.data(key)

Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.

The solution is to use an attribute exists selector to target the correct element then fetch the data value. something like

var uplifted = effectData.filter('[data-uplifted]').data("uplifted");

Demo: Fiddle

answered May 9, 2014 at 6:10

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

L84 Over a year ago

Ah, that makes sense. Wasn't aware of that. Learn something new everyday. => Thank You for the help.

Collectives™ on Stack Overflow

Reading Data Attributes = Undefined?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related