data attribute of element showing undefined using jquery

Question

i am trying to grab the data attribute of an element but somehow it says undefined. here is my html code

 <div id="imageContainer">
    <img data-fullimageid="1" data-title="Cool Stuff" class="backgroundImages" src="images/galvanize/1.jpg" />
    <img data-fullimageid="2" data-title="Awesome" class="backgroundImages" src="images/galvanize/1336/dj.jpg" />
    <img data-fullimageid="3" data-title="Elite" class="backgroundImages" src="images/galvanize/3.jpg" />
</div>

And using Jquery to alert it

    var firstImageTite = $('.backgroundImages:first-child').data("data-title");
alert(firstImageTite);

it says Undefined. Please tell me where i am wrong, thanks.

PSL · Accepted Answer · 2013-09-17 03:32:00Z

3

Just do

$('.backgroundImages:first-child').data("title");

instead of

$('.backgroundImages:first-child').data("data-title");

jquery .data caches the value of the data-* into the key with the name that appears after data-. So while using setter and getter of jquery data api, you just need to mention the attribute name (without prefix).

Also do note that any changes you make using .data does not change the actual attribute value, so once modified with .data api retrieve it with .data api as well

edited Sep 17, 2013 at 3:32

answered Sep 17, 2013 at 3:25

PSL

124k21 gold badges257 silver badges243 bronze badges

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

Comments

Dipesh Parmar · Accepted Answer · 2013-09-17 03:26:19Z

2

Replace

.data("data-title");

with

.data("title");

OR

.attr("data-title");

answered Sep 17, 2013 at 3:26

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Comments

Rajeshkumar · Accepted Answer · 2013-09-17 04:04:46Z

1

put title instead of data-title.

$(function(){
$('#titledata').text($('.backgroundImages:first-child').data('title'));
});

Running example is here

http://jsfiddle.net/rajeshmepco/ud6Ww/1/

answered Sep 17, 2013 at 4:04

Rajeshkumar

89513 silver badges39 bronze badges

Collectives™ on Stack Overflow

data attribute of element showing undefined using jquery

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related