在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