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