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

Question

我用过

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

现在我需要从已知

中的多个
• 元素中获取特定的
• 元素。

  但是明显的选择器不起作用。

  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 属性..类名

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

  <强> .data() 设置/获取 jQuery 内部缓存属性，并且不映射到属性或特性。

  但是，在 html5 属性中设置 .attr() 并包含前缀 "data-" 可以通过 .data() 正确访问，但反之则不然!!

  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');

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

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

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

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

SEE DEMO