動態添加數據時，按數據屬性選擇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示例顯示與data-attribute和jquery.data（）的差異

jQuery.data()與您嘗試搜索的HTML5 data-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
    } 
});

希望有所幫助！

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