javascript - jquery 自定义数据属性在 div 标签内不起作用

Question

我正在使用这个div代码

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

并尝试打印类似

的值

 japp.init = function () {
  console.log($("div").data("role"));
  console.log($("div").data("lastValue"));
  console.log($("div").data("hidden"));
  console.log($("div").data("options").name);
});

如果我将上面的 div 标签直接放在 body 中，效果很好，但是当我将 div 标签放在任何其他 div 标签中时，它不起作用并显示未定义。

   <div class="page">
   <div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'></div>
   </div>

控制台为上述 html 打印 undefined。

有什么不明白的请告诉我

Answer 1

当获取数据时，jQuery 从匹配选择器的第一个元素返回数据，如果 DOM 中的第一个 div 没有数据 - jquery 不会返回它。

尝试

japp.init = function () {
  console.log($("div[data-role]").data("role"));
  console.log($("div[data-lastValue]").data("lastValue"));
  console.log($("div[data-hidden]").data("hidden"));
  console.log($("div[data-options]").data("options").name);
});

或者更好地给这个 div 一个 id，然后通过 id 选择 $('#someid').data('role')