javascript: html5 获取和设置数据-*答案

【问题标题】：javascript: html5 getting and setting data-*javascript: html5 获取和设置数据-*
【发布时间】：2013-04-23 13:50:00
【问题描述】：

我用过

var activeFilter = $('<li></li>').data('input-id', 'mycustomId');
$('#container').append(activeFilter);

现在我需要从已知

【问题讨论】：

【解决方案1】：

您在此处使用属性选择器，如果您将 HTML5 数据设置为：

activeFilter.attr('data-input-id', 'mycustomId');

但是，您应该使用正确的合成器来访问它：

$('#container li:firstchild').data('inputId');

要回复您的评论，您可以使用 .filter() 检索它：

var existing = $('li').filter(function(){return $(this).data('inputId') === "mycustomId"});

【讨论】：

问题是如何获取一个给定值的对象，用 .data() 设置
这个。 Goin_13 在这里很好地描述了这个问题：stackoverflow.com/a/13276132。像您所做的那样通过 jquery 设置数据实际上并没有添加您可以查询的数据属性。
@gr9zev 如果你不关心你的数据存储在哪里，那么使用.data() 和.filter() 会很好用，但是如果你想要DOM 节点上的data-* 属性，那么正如我的回答和 huwiler 的评论中的链接所指出的那样，您不能使用 .data()。
@roasted 谢谢，这是一个可以接受的解决方案！！然而，要明确这一点，.attr() 和 .prop() 在 data-* 上下文中的真正区别是什么。我们可以同时使用吗？我们必须使用第一个来支持第二个......关于性能和标准的任何指针吗？

【解决方案2】：

不幸的是，对于您的方法，jQuery 不会在 DOM 节点的 data 属性中存储通过 .data() 设置的数据（请参阅 this question）。

相反，您需要使用.attr() 进行设置，然后您可以使用$('li[data-input-id=mycustomId]')：

$('<li></li>').attr('data-input-id', 'mycustomId');

【讨论】：

attr 顺便说一句已被弃用。但是感谢您提供有关 jquery 缓存的一小部分。
@gr9zev .attr() 没有被弃用，它的用例被简单地限制在“范围内”，因此它不会与.prop() 被滥用/混淆。 attr 文档从顶部解释了所有这些，并且由于 data 属性是实际的 DOM 节点属性，而不是 DOM 节点对象上的属性，因此您应该使用 attr （根据我阅读文档的方式，至少）。
@gr9zev 我很想看看记录在哪里。
好的，说了这么多，你能解释一下 .prop('data-mydata') 和 .attr('data-mydata') 之间的真正区别吗？
@gr9zev 关于.prop() 与.attr() 有一个相当彻底的答案here。我想你会想要使用.attr()，因为这会直接在标记中设置DOM节点属性，这听起来就像你想用data-*做的一样。