jQuery: get data attribute

Question

In my html I have a span element:

<span class="field" data-fullText="This is a span element">This is a</span>

And I want to get the data-fullText attribute. I tried these two ways, but they didn't work (the both return undefined):

$('.field').hover(function () {
    console.log('using prop(): ' + $(this).prop('data-fullText'));
    console.log('using data(): ' + $(this).data('fullText'));
});

Then I searched and found these questions: How to get the data-id attribute? and jquery can't get data attribute value.
The both's answers are "Use .attr('data-sth') or .data('sth')".
I know that .attr() is deprecated (in jquery-1.11.0, which I use), but, however, I tried it.
And it workded!

Can someone explain why?

Solution 1

You could use the .attr() function:

$(this).attr('data-fullText')

or if you lowercase the attribute name:

data-fulltext="This is a span element"

then you could use the .data() function:

$(this).data('fulltext')

The .data() function expects and works only with lowercase attribute names.

Solution 2

1. Try this: .attr()

  $('.field').hover(function () {
    var value=$(this).attr('data-fullText');
  $(this).html(value);
});

DEMO 1: http://jsfiddle.net/hsakapandit/Jn4V3/

2. Try this: .data()

$('.field').hover(function () {
    var value=$(this).data('fulltext');
  $(this).html(value);
});

DEMO 2: http://jsfiddle.net/hsakapandit/Jn4V3/1/

Solution 3

Change IDs and data attributes as you wish!

  <select id="selectVehicle">
       <option value="1" data-year="2011">Mazda</option>
       <option value="2" data-year="2015">Honda</option>
       <option value="3" data-year="2008">Mercedes</option>
       <option value="4" data-year="2005">Toyota</option>
  </select>

$("#selectVehicle").change(function () {
     alert($(this).find(':selected').data("year"));
});

Here is the working example: https://jsfiddle.net/ed5axgvk/1/

Solution 4

This works for me

$('.someclass').click(function() {
    $varName = $(this).data('fulltext');
    console.log($varName);
});

View more solutions

Comments

[Darin Dimitrov]

Great, then all you have to do is lowercase your attribute name because that's how the .data function works and how it expects your attributes to be named.

[Al.G.]

Thanks, it works perfectly! I didn't now that data- should have only lower-case letters :)

[mrdeveloper]

stackoverflow.com/questions/15070277/…

[Pavel Gatnar]

you are not the first and not the last who stuck on undefined data because of the lowercase limitation

[pat capozzi]

IN CASE ANYONE MISSED DATA- ONLY USES LOWER CASE --- good catch!

[Jamie Barker]

If anyone is interested as to which of these options is best to use, see here

[Clarence Liu]

I should warn you that if you change the value using .data('attr', value), you can only retrieve it using .data(), using .attr() will give you the value stored on the DOM only which isn't updated via a call to .data's setter.

[DrGriff]

I prefer the syntax: $(this).data().fulltext. Often one has multiple data-attributes on an element so it's often useful to create a local variable that points to the data object so that one doesn't have to traverse the object tree each time, e.g. var data = $(this).data();, and then use that local variable in your code to read each property in turn, e.g. var name = data.name, var age = data.age.

[Nick Rice]

The question was about data attributes and nothing to do with selects or any other form of input.

[curiousBoy]

The example was about data attributes too. Read it again!

[Nick Rice]

Oh, I see. Maybe it would have been clearer if you'd illustrated your answer with the static span in the question, rather than use an input field. That threw me. Sorry.

[Arturio]

This worked for me, and your solution is pretty straight forward