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

【问题标题】：jquery custom data attribute not working inside div tagjquery自定义数据属性在div标签内不起作用
【发布时间】：2013-07-17 13:58:44
【问题描述】：

我正在使用这个 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 的控制台打印未定义。

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

【问题讨论】：

顺便说一句，在你的第二个 html 中有一个空格，在 data- options='{"name":"John"}'。我不知道它是否对代码有任何影响，但你可以检查一下；）

标签： javascript jquery jquery-selectors jquery-data

【解决方案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，然后像 $('#someid').data('role') 这样按 id 选择

【讨论】：

感谢 Artek，您的解决方案完全符合我的要求。我会在 5 分钟内接受答案
@user965884，只要知道如果你这样做并且有其他元素具有相同的数据属性，你将从找到的第一个实例中获取值。
是的，如果使用这些自定义属性处理多个 div，请使用 $.each() 函数，如 @Kamil T 所述

【解决方案2】：

您的选择器是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')

【讨论】：

【解决方案3】：

试试

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

等等

这样你将循环遍历所有嵌套在 div 中的 div 类“page”。

【讨论】：

【解决方案4】：

您没有准确指定要获取的 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"));
....

【讨论】：

【解决方案5】：

我相信这是因为 $("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);
  });

【讨论】：

【解决方案6】：

给你的 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。我希望这会有所帮助

【讨论】：