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, Apr 28 '11 at 16:13
ok, the problem was `$(this)` was something else than what I was expecting :) sorry for being dumb :x — Alex, Apr 28 '11 at 16:38

Jamie Treworgy · Accepted Answer · 2011-04-28T16:27:52.497

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 '11 at 16:27

answered Apr 28 '11 at 16:14

Jamie Treworgy

23,934
8
76
119

loooove doing this. Beat me to the answer :p – Derek Adair Apr 28 '11 at 16:16
jQuery treats `data-*` attributes as `.data()`. See @amit_g's demo. – gen_Eric Apr 28 '11 at 16:26
@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 Apr 28 '11 at 16:29
So basically it copies the `data-*` values on first access but they are out of sync once changes are made through `$.data`. – Jamie Treworgy Apr 28 '11 at 16:37
do you guys know what value will have `$(this).data('what');` if there is no data-what attribute? – Alex Apr 28 '11 at 17:02
it will be `undefined,` but generally it will be falsey, so you can use that code unchanged to return a default value. – Jamie Treworgy Apr 28 '11 at 17:03

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

3

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 28 '11 at 16:20

amit_g

30,880
8
61
118

Shaz · Answer 3 · 2011-04-28T16:19:49.043

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 '11 at 16:19

answered Apr 28 '11 at 16:13

Shaz

15,637
3
41
59

jQuery treats `data-*` attributes as `.data()`. See @amit_g's demo. – gen_Eric Apr 28 '11 at 16:26
1

@Rocket: Using `.attr()` for this is faster. Check out http://jsperf.com/data-vs-attr – Shaz Apr 28 '11 at 16:43

jQuery $.data() conditional statement

3 Answers3