使用jQuery循环DOM以获取一些数据属性值

Question

这似乎很简单，但是我一直在“未定义”

我正在尝试使用“ data-” HTML5属性，并遍历了一堆看起来像这样的div标签：

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

我正在遍历一堆这样的内容：

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

但是我不断得到“未定义”，如果我这样做（获取属性），它可以正常工作：

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

那我想念什么？

Answer 1

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

“ .data（）方法使我们能够以一种安全的方式将任何类型的数据附加到DOM元素上，从而避免循环引用，从而避免内存泄漏。”

至少在此时，要使用.data函数，必须先使用函数附加数据，然后才能使用.data函数将其读回。

如果您需要读取现有数据，请使用.attr或.prop函数。

Answer 2

似乎是Hamza Kubba提出的命名问题，但有点不同...

如果我将data属性的名称更改为“ data-scheduled-on”，则可以通过.data（“ scheduledOn”）进行检索，也可以使用data-scheduledon和.data（“ scheduledon”）进行检索。

因此，不要将CAPS用作数据名称-这是这个故事的寓意！

Answer 3

请注意，根据HTML 5规范，属性名称不应包含任何大写字母，并且某些浏览器（例如FF和Chrome）会将所有大写字母更改为小写字母。 因此，如果您使用小写名称访问数据属性，则以下演示有效：

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

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

回答：由于页面上具有相同ID的元素不能超过一个，因此我在演示中使用了类选择器。

寓意 ： 不要使用大写字母 ; 您的浏览器可能并不总是那样的“理解”。