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?

`$(this).data('fulltext')` will work as attributes are lower cased. But indeed, you should set it as: `data-fulltext` or `data-full-text`. For the later, then: `$(this).data('fullText')` would work, using camel case syntax — A. Wolff, May 11 '14 at 11:32
FYI, `I know that .attr() is deprecated ` attr() is not deprecated, this is the method to use to set/get attribute, not property — A. Wolff, May 11 '14 at 11:37
In your case, use `data()` instead but you should rewrite this attribute to use: `data-fulltext="This is a span element"` — A. Wolff, May 11 '14 at 11:40

score 168 · Accepted Answer · edited Dec 03 '16 at 23:43

168

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.

edited Dec 03 '16 at 23:43

Praveen Kumar Purushothaman

164,888
24
203
252

answered May 11 '14 at 11:34

Darin Dimitrov

1,023,142
271
3,287
2,928

4

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. – Darin Dimitrov May 11 '14 at 11:38
3

Thanks, it works perfectly! I didn't now that `data-` should have only lower-case letters :) – Al.G. May 11 '14 at 11:45
you are not the first and not the last who stuck on undefined data because of the lowercase limitation – Pavel Gatnar Mar 13 '15 at 11:47
6

IN CASE ANYONE MISSED DATA- ONLY USES LOWER CASE --- good catch! – pat capozzi Jun 17 '15 at 00:50
If anyone is interested as to which of these options is best to use, [see here](http://stackoverflow.com/questions/23423383/which-jquery-method-is-better-attr-or-data/23424446#23424446) – Jamie Barker Jan 06 '16 at 09:21
1

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. – Clarence Liu Mar 10 '16 at 01:24
1

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. – DrGriff May 20 '16 at 08:43

score 5 · Answer 2 · answered May 11 '14 at 11:43

5

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/

answered May 11 '14 at 11:43

mrdeveloper

538
3
9

http://stackoverflow.com/questions/15070277/why-jquery-1-9-attr-method-not-deprecated – mrdeveloper May 11 '14 at 11:50
This is 2023, and only `.attr()` worked for me. `.data()` was returning an empty Object. – Fred Rocha May 30 '23 at 11:17

score 3 · Answer 3 · answered Aug 20 '16 at 07:16

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/

answered Aug 20 '16 at 07:16

curiousBoy

6,334
5
48
56

The question was about data attributes and nothing to do with selects or any other form of input. – Nick Rice Sep 15 '16 at 09:14
The example was about data attributes too. Read it again! – curiousBoy Sep 16 '16 at 00:30
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. – Nick Rice Sep 23 '16 at 08:27
1

This worked for me, and your solution is pretty straight forward – Arturio Mar 26 '21 at 14:20

score 1 · Answer 4 · answered Apr 26 '15 at 15:06

1

This works for me

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

answered Apr 26 '15 at 15:06

Jack Barham

3,197
10
41
62

score 0 · Answer 5 · answered Sep 23 '17 at 08:50

This is what I came up with:

  $(document).ready(function(){
  
  $(".fc-event").each(function(){
  
   console.log(this.attributes['data'].nodeValue) 
  });
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id='external-events'>
   <h4>Booking</h4>
   <div class='fc-event' data='00:30:00' >30 Mins</div>
   <div class='fc-event' data='00:45:00' >45 Mins</div>
</div>

jQuery: get data attribute

5 Answers5

Linked

Related