Loop though DOM with jQuery to get some data- attribute value

Question

This seems like a simple thing, but I keep getting "undefined"

I am trying out the "data-" HTML5 attribute and I am looping through a bunch of div tags that look like this:

    <div id="myEvent"
     data-scheduledOn="1399985100000"
     data-eventStatus="3">

And I am looping through a bunch of these like this:

   $('[id="myEvent"]').each(function(index, divItem) {
        alert($(divItem).data("scheduledOn"));
   }

But I keep getting "undefined" If I do this (get the attribute) it works fine:

        alert($(divItem).attr("data-scheduledOn"));

So What am I missing?

You can`t have more than one id on a page. Also, you should keep IE's older Browser case-insensitivity in mind with HTML ids. By the way, you can get an id like `$('#myEvent')`. Of course, there is no need for an `.each()` loop with an id. — StackSlave, May 14 '14 at 02:10
If im not wrong, ```$(divItem).data("scheduledOn");``` is not ```$(divItem).attr("data-scheduledOn);``` -latter is what you probably want to do. [This](http://stackoverflow.com/questions/7261619/jquery-data-vs-attr) might explain things in detail — Varinder, May 14 '14 at 02:10
Should give the divs a class, not the same id. E.g. `
`. Then use `$('div.blah').each()`. — Hamza Kubba, May 14 '14 at 02:11
The alert is popping up the correct number of times, so the .each() is definitely working properly — mmaceachran, May 14 '14 at 02:12
Will cause you problems later, so don't use id like that. And try to use `$(this)` instead of `$(divItem)` to see if that helps. And if it doesn't try `$(this).data('scheduled-on')`. — Hamza Kubba, May 14 '14 at 02:13

score 0 · Answer 1 · answered May 14 '14 at 02:25

0

http://api.jquery.com/data/

"The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks."

At least at this point in time, to use the .data function you have to attach the data using the function before you can read it back using the .data function.

If you need to read pre-existing data use the .attr or .prop functions.

answered May 14 '14 at 02:25

silver

650
4
15

This is wrong. You can absolutely use `.data` to read out a data attribute on a DOM element without having set it with `.data` before. See: http://jsfiddle.net/r55K2/ – christian314159 May 14 '14 at 03:45
Thanks for the heads up, in all testing I had done I could never get it it work I must have not had enough coffee this morning :) – silver May 14 '14 at 04:45

score 0 · Answer 2 · answered May 14 '14 at 03:11

It seems as though It is a naming problem as Hamza Kubba suggested, but just a bit different...

if I changed the name of the data attribute to "data-scheduled-on" I can retrieve it by .data("scheduledOn") OR using data-scheduledon and .data("scheduledon") also works.

So don't use CAPS for data- names is the moral of this story!

score 0 · Answer 3 · answered May 14 '14 at 03:14

Please note that per HTML 5 specs, the attribute name should not contain any uppercase letters and some browsers such as FF & Chrome will change any uppercase letter to lowercase. That's why the following demo works if you access the data attributes with lowercase names:

http://jsfiddle.net/fiddleyetu/5LdQd/

$('div.myEvent').each(function(index, divItem) {
    console.log($(divItem).data("scheduledon"));
    console.log( $(divItem).data("eventstatus") );
});

Ans since you cannot have more than one element on a page with the same ID, I have used a class selector for the demo.

MORAL: Do not use UPPERcase; your browsers may not always be that 'understanding'.

Loop though DOM with jQuery to get some data- attribute value

3 Answers3