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

尝试

$("div.page div").each(function(){
    console.log($(this).data("whatever_you_need"));
});

等

通过这种方式，您将循环遍历div中的所有div，并使用类'page'。

Answer 2

获取数据时，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'）

Answer 3

您的选择器为div，当您的页面上有更多divs时，jQuery将选择（在本例中）第一个。

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

在上面HTML中，第一个div没有data-*因此会产生未定义的值

您必须更加具体选择

$('.page div').data('role')

或者

$('div:first div').data('role')

Answer 4

您并没有准确指定要获取的div。每当您尝试从特定元素获取特定数据时，您应该确定要访问的div。这可以在元素的迭代内发生，也可以通过ID或与ID相关的元素发生。它不应该基于tagname甚至classname来完成，因为它们可以是多个。在这种情况下，为什么不在您尝试获取的div上添加ID，以便您可以专门访问它：

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

然后访问：

console.log($("#thisDiv").data("role"));

另外，性能一遍又一遍地包装相同的jquery对象，你可以像这样缓存它：

$thisDiv = $("#thisDiv");
console.log($thisDiv.data("role"));
....

Answer 5

给你的Div一个类class =“myClass”

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

然后你可以改变你的jquery选择器：

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

否则jquery不知道你在寻找哪个div。我希望这会有所帮助

Answer 6

我相信这是因为$（“div”）返回所有出现的div，然后选择第一个执行函数。我不确定您希望如何使用此功能，但可能值得考虑这样的事情 JSFiddle 其中一个类用于选择正确的div

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

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

6 个答案: