Question

关于数据属性的Noob问题

我想知道在jQuery Selector中使用data-attribute会在以后带来什么麻烦吗？

我正在尝试将.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');

这将读取具有类“example”的元素的data-suffix属性的值。

使用.data（）方法时需要注意的另一个重要事项是，必须省略选择器中的数据前缀以读取存储在该属性中的值。

在.each（）方法之前选择属性的方式将起作用：

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

但是，如果您可以将其缩小到特定元素（例如：

）会更好

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

这是因为第一个选择器将遍历文档中的每个节点，这将占用更多时间，而第二个选择器将只通过文档中的div标签。

Answer 2

本机查询选择器支持属性选择器，因此它很好。就未来而言，我不认为在不久的将来会出现问题。

但如果你可以使用附加到属性选择器的元素选择器，如$('div[data-suffix-attribute="delete"]')

，那会更好

如果您非常担心性能，那么将class属性添加到所需元素然后使用类选择器

是更好的选择。

Answer 3

最好在id使用selector，明显是fast，如果您有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

在jQuery Selector中使用HTML5数据属性

3 个答案: