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
– A. Wolff, Commented May 11, 2014 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
– A. Wolff, Commented May 11, 2014 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
– A. Wolff, Commented May 11, 2014 at 11:40

Praveen Kumar Purushothaman · Accepted Answer · 2016-12-03 23:43:34Z

173

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 3, 2016 at 23:43

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

answered May 11, 2014 at 11:34

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Darin Dimitrov Over a year ago

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. Over a year ago

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

pat capozzi Over a year ago

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

Clarence Liu Over a year ago

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 Over a year ago

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.

|

mrdeveloper · Accepted Answer · 2014-05-11 11:43:47Z

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, 2014 at 11:43

mrdeveloper

5383 silver badges9 bronze badges

2 Comments

mrdeveloper Over a year ago

stackoverflow.com/questions/15070277/…

Fred Rocha Over a year ago

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

curiousBoy · Accepted Answer · 2016-08-20 07:16:39Z

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, 2016 at 7:16

curiousBoy

6,8846 gold badges52 silver badges60 bronze badges

4 Comments

Nick Rice Over a year ago

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

curiousBoy Over a year ago

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

Nick Rice Over a year ago

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 Over a year ago

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

Jack Barham · Accepted Answer · 2015-04-26 15:06:42Z

1

This works for me

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

answered Apr 26, 2015 at 15:06

Jack Barham

3,21912 gold badges45 silver badges64 bronze badges

Comments

gsam01 · Accepted Answer · 2017-09-23 08:50:29Z

0

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>

answered Sep 23, 2017 at 8:50

gsam01

11 silver badge1 bronze badge

Collectives™ on Stack Overflow

jQuery: get data attribute

5 Answers 5

7 Comments

2 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related