1

我正在使用这个 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。

如果有什么不清楚的地方请告诉我

4

6 回答 6

3

获取数据时，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，然后像 $('#someid').data('role') 这样按 id 选择

于 2013-07-17T14:02:30.173 回答
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')
于 2013-07-17T14:02:32.137 回答
2

尝试

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

等等

这样，您将循环浏览嵌套在具有“页面”类的 div 中的所有 div。

于 2013-07-17T14:00:28.793 回答
2

您没有确切指定要获取的 div 。每当您尝试从特定元素获取特定数据时，您应该确定您正在访问哪个 div。这可以在元素的迭代中发生，也可以通过 ID 或与 ID 相关的元素发生。它不应该基于标记名甚至类名来完成，因为它们可以是多个。在这种情况下，为什么不在您尝试获取的 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"));
....
于 2013-07-17T14:03:03.243 回答
1

给你的 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。我希望这个能帮上忙

于 2013-07-17T14:05:16.727 回答
1

我相信这是因为 $("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);
  });
于 2013-07-17T14:05:16.963 回答