javascript - 动态添加数据时按数据属性的JQuery选择器？

Question

我有ul几个项目。我使用 jquery 在页面加载后动态填充列表。当我添加每个列表项时，我还使用 jquery ".data()" 函数向该元素的数据添加了一个 "itemID"。像这样的东西：

var item = $('<li>My Item Name</li>');
item.data('itemID', '123ABC456');

稍后，我需要一个选择器来确定我的项目列表中是否有任何项目具有特定的 itemID。首先我尝试使用：

$('*[data-itemID="123ABC456"]');

这不起作用——在进一步的研究中，我发现这种语法只有在页面加载时在 DOM 中设置了 data 属性时才有效；如果您动态使用“.data”jquery 方法，它就不起作用。

接下来我尝试了：

$(':data(itemID==123ABC456)');

出于某种原因，这不起作用。但是，如果我简单地运行$(':data(itemID)')，那么我会得到所有在其数据中具有 itemID 的 li 元素。

我知道 itemID 属性设置正确，因为当我调用.data()该列表项时，我得到：

Object { itemID="123ABC456"}

如何选择数据中 itemID 为“123ABC456”的所有元素？

Answer 1

http://jsfiddle.net/w28p9/1/ <-- jsFiddle 示例显示数据属性和 jquery.data() 的差异

jQuery.data()与您尝试搜索的 HTML5 数据名称属性不同。

http://api.jquery.com/jQuery.data/

jQuery.data() 保存在 jquery 元素内部（这个数据是隐藏在视线之外的）。[data-itemID]如果内部实际有，则寻找会起作用： <li data-itemID="12345"></li>.

要检索并查找实际隐藏的.data()尝试：

// of course be more specific than just searching through all <li>'s
$('li').each(function () {
    if ( $(this).data('itemID') === '123ABC456' ) {
        // do whatever you wanted to do with it
    } 
});

希望有帮助！

Answer 2

代替

$(item).data('itemID', '123ABC456')

利用

$(item).attr('data-itemID', '123ABC456')

然后你可以使用

$('[data-itemID=123ABC456]') 

作为选择器

Answer 3

将 itemID 放入 DOM 怎么样：

var item = $('<li itemID="'+itemid+">My Item Name</li>');