动态添加数据时按数据属性查询JQuery选择器

JQuery selector by data attribute when data is added dynamically?

本文关键字：查询 JQuery 选择器 数据属性 添加 数据 动态      更新时间：2024-03-14

我有一个包含多个项目的ul。我使用jquery在页面加载后动态填充列表。在添加每个列表项时，我还使用jquery".data（）"函数向该元素的数据添加了一个"itemID"。类似这样的东西：

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

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

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

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

接下来我尝试了：

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

出于某种原因，这不起作用。然而，如果我只运行$(':data(itemID)')，那么我会获取数据中有itemID的所有li元素。

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

Object { itemID="123ABC456"}

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

http://jsfiddle.net/w28p9/1/<--jsFiddle示例显示了与数据属性&jquery.data（）

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

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

jQuery.data（）保存在jQuery元素内部（该数据是隐藏的）。如果实际的内部有<li data-itemID="12345"></li>，则查找[data-itemID]将起作用。

要检索并查找实际隐藏的.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
    } 
});

希望能有所帮助！

而不是

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

使用

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

然后你可以使用

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

作为选择器

把itemID放在DOM:中怎么样

var item = $('<li itemID="'+itemid+">My Item Name</li>');
相关文章：