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

Question

我用过

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

现在我需要从已知<ul>中的多个<li>元素中获取特定的<li>元素。

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

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

有用的链接： .prop（）vs .attr（） 如何获取，设置和选择具有数据属性的元素？

摘要：

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

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

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

但是 ，在html5中使用.attr()设置并且包含前缀"data-" ATTRIBUTES可以使用.data()正确访问，但不是VICE VERSA !!

http://jsfiddle.net/wjEvM/

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

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

问题是我如何获得（我必须使用哪个选择器）具有给定数据集值的li（对象ie），如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"});

看看演示

Answer 2

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

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

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