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?

Foreshow

$(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 – Apiarian

FYI, I know that .attr() is deprecated attr() is not deprecated, this is the method to use to set/get attribute, not property – Apiarian

So what I should use - prop or attr? – Foreshow

In your case, use data() instead but you should rewrite this attribute to use: data-fulltext="This is a span element" – Apiarian

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

Equivocation

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

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

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

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

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

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

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

Answer 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/

Castanets

#15070777 – Castanets

This is 2023, and only .attr() worked for me. .data() was returning an empty Object. – Tanberg

Answer 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/

Adamik

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

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

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

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

Answer 4

This works for me

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

Celloidin

Answer 5

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>

Flagging