jQuery data() returns undefined, attr() returns integer

Question

I have the following code:

alert($embellishment.data("embellishmentId"));
alert($embellishment.attr("data-embellishmentId"));

The first alert returns undefined, whereas the second alert returns an integer, 3.

-- SEE DEMO --

I'm using jQuery version 1.7.2 (data was added with version 1.4 I believe)

Why is this? Should I be using data() at all if its not returning the right values?

VisioN · Accepted Answer · 2012-06-12 08:50:17Z

124

OK. I found the problem by interpreting jQuery docs.

When you write:

$embellishment.data("embellishmentId");

it is handled by jQuery as compound attribute:

<div data-embellishment-id="3"></div>

So, to solve the problem you can use lower case in the data key otherwise it just addresses the different attribute.

<!-- HTML -->
<div data-embellishmentid="3"></div>

// JavaScript
$embellishment.data("embellishmentid");

edited Jun 12, 2012 at 8:50

answered Jun 12, 2012 at 8:43

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

5 Comments

Esailija Over a year ago

Here is the source code that does it: var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); in internal function dataAttr. Where rmultidash is rmultiDash = /([A-Z])/g;

Alex Over a year ago

whatwg.org/specs/web-apps/current-work/multipage/…*-attributes

TerranRich Over a year ago

Guys, jQuery has done that for a long time. Take a look at CSS attributes. If you want to see a CSS style, it uses camelCase for un-quoted attributes. For example: $('#elem').css({paddingTop: '40px'}); and $('#elem').css({'padding-top': '40px'});.

Sarath TS Over a year ago

@Vision, If we use multiple data how it's works? eg <div data-embellishmentid="4"></div>, <div data-embellishmentid="5"></div>, <div data-embellishmentid="6"></div>

VisioN Over a year ago

@samsam Not sure what you ask for, but assume you want an array of values. Use this approach: $embellishment.map(function() { return $(this).data('embellishmentid'); }).get();.

Collectives™ on Stack Overflow

jQuery data() returns undefined, attr() returns integer

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related