javascript：html5获取和设置数据 - *

Question

我用过

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

现在我需要得到特定的＆lt; li>元素中的多个＆lt; li>已知的元素＆lt; ul＆gt;。

然而，明显的选择器不起作用。

var existing = $('li[data-input-id=mycustomId]');
alert(existing.length);

有用的链接： .prop() vs .attr() How to get, set and select elements with data attributes?

要点：

.prop() 设置/获取DOM属性..例如的className

.attr() 设置/获取TAG ATTRIBUTES ..例如类，从而使选择器 $('obj[class=xxx]') 成为可能。

.data() 设置/获取jQuery内部缓存属性，但不会映射到属性或属性。

HOWEVER ，在html5中使用 .attr() 设置并且包含前缀 "data-" 的属性可以通过< strong> .data() ，但不是VICE VERSA !!

http://jsfiddle.net/wjEvM/

在调试器中没有列出属性data-input-id，但可以通过

访问它

$('#container li:firstchild').data('input-id');

问题是如何得到（我必须使用哪个选择器）具有给定数据集值的li（对象即）obj.getChildWithData('data-id', 'mycustomId'); 除了循环检查每个li的数据集。或者使用愚蠢的 document.querySelectorAll，因为它没有做所需的事情。

如果适用，请解释是否适用。将data- *属性设置为属性不允许我使用html5推荐的.data（）。所以我想去吧。

Answer 1

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

，则此方法有效

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

但是，您应该使用正确的synthax访问它：

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

要回答您的评论，您可以使用.filter（）：

来检索它

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

SEE DEMO

Answer 2

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

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

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