在jQuery選擇器中使用HTML5數據屬性

Question

Noob關於數據屬性的問題

我想知道在jQuery Selector中使用數據屬性會在將來帶來任何麻煩嗎？

我正在嘗試減少.class和#id作為jQuery Selector的使用，因為我正在處理的大部分數據都是從data-attribute生成的

代碼示例

$(document).ready(function(){

  var mydata = $(document).data('my-data-attribute');

});

上面的代碼會減慢加載時間嗎？

要么

$('[data-suffix-attribute="some_value"]').each(function(){
   ......
});

要么

$('[data-suffix-attribute="delete"]').click(function(){
   // delete action happening here
});

這會帶來麻煩嗎？

Answer 1

$(document).ready(function(){

  var mydata = $(document).data('my-data-attribute');

});

上面的代碼不起作用。 如果要使用jQuery .data（）方法讀取元素的HTML5數據屬性，則首先需要使用jQuery選擇器選擇相關元素，然后可以使用如下所示的方法：

var mydata = $('.example').data('suffix');

這將讀取具有“示例”類的元素的數據后綴屬性的值。

使用.data（）方法時要注意的另一重要事項是，您必須從選擇器中省略數據前綴，才能讀取存儲在該屬性中的值。

在.each（）方法生效之前選擇屬性的方式：

$('[data-suffix-attribute="some_value"]');

但是，最好將其范圍縮小到特定元素，例如：

$('div[data-suffix-attribute="some_value"]');

這是因為第一個選擇器將遍歷文檔中的每個節點，這將花費更多的時間，而第二個選擇器將僅遍歷文檔中的div標簽。

Answer 2

屬性選擇器受本機查詢選擇器支持，因此很好。 就未來而言，我認為在不久的將來這不會成為問題。

但是如果可以使用附加到屬性選擇器上的元素選擇器（例如$('div[data-suffix-attribute="delete"]')

如果您非常擔心性能，則最好將類屬性添加到所需的元素，然后使用類選擇器

Answer 3

最好在selector中使用id最好fast ，如果selector中有multiple data attributes ，則最好使用$('[data-suffix-attribute="delete"]').click(); 。 您可以使用parent selector代替您的data-attribute elements例如，

$('#parentId').on('click','[data-suffix-attribute="delete"]',function(){
   // delete action happening here
});

#parentId包含所有data attribute elements