jQuery $.data() conditional statement

Question

I'm using the html5 "data" attribute on a element, and I want to assign the attribute value to a variable only if it exists and if it's not empty:

var xxx = $(this).data('what') ? $(this).data('what') : 'default_value';

but it doesn't work. I always get the default value...

Have you outputted the conditional part of the statement to see whether it can actually resolve to true and false? If not, change your conditional so it works. — James
– James, Commented Apr 28, 2011 at 16:13
ok, the problem was $(this) was something else than what I was expecting :) sorry for being dumb :x — Alex
– Alex, Commented Apr 28, 2011 at 16:38

Jamie Treworgy · Accepted Answer · 2011-04-28 16:27:52Z

5

Using a short circuit is simpler and more efficient:

var xxx = $(this).data('what') || 'default_value';

But your code should have worked anyway, assuming the data existed (as the commenter noted).

edited Apr 28, 2011 at 16:27

answered Apr 28, 2011 at 16:14

Jamie Treworgy

24.4k9 gold badges81 silver badges120 bronze badges

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

6 Comments

Derek Adair Over a year ago

loooove doing this. Beat me to the answer :p

gen_Eric Over a year ago

jQuery treats data-* attributes as .data(). See @amit_g's demo.

Jamie Treworgy Over a year ago

@Rocket, didn't know that. I removed my caveat. Does it actually store the data as an attribute now? If not, what happens if you update the data but not the attribute?

Jamie Treworgy Over a year ago

So basically it copies the data-* values on first access but they are out of sync once changes are made through $.data.

Alex Over a year ago

do you guys know what value will have $(this).data('what'); if there is no data-what attribute?

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Looks like $(this) is not what you expect it to be. Other than that, the statement looks fine. Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 28, 2011 at 16:20

amit_g

31.3k8 gold badges67 silver badges124 bronze badges

Comments

Shaz · Accepted Answer · 2011-04-28 16:19:49Z

2

According to the documentation:

.data()

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

.attr()

The .attr() method gets the attribute value for only the first element in the matched set.

So what you want is to use the .attr() method, like this:

var xxx = $(this).attr('data-what') || 'default_value';

edited Apr 28, 2011 at 16:19

answered Apr 28, 2011 at 16:13

Shaz

15.9k4 gold badges44 silver badges60 bronze badges

2 Comments

gen_Eric Over a year ago

jQuery treats data-* attributes as .data(). See @amit_g's demo.

Shaz Over a year ago

@Rocket: Using .attr() for this is faster. Check out jsperf.com/data-vs-attr

Collectives™ on Stack Overflow

jQuery $.data() conditional statement

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related