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...

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...

• javascript
• jquery
• html
• jquery-data

• 1 are you sure that data-what exists at any point? – Naftali Commented Apr 28, 2011 at 16:12
• 1 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 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 Commented Apr 28, 2011 at 16:38

3 Answers 3

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 menter noted).

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

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';