使用jQuery选择HTML5数据属性

我使用jQuery选择数据属性能带来未来的任何麻烦知道的意志？

我试图减少的.class的使用情况和作为#ID jQuery选择，因为大多数数据我正在将来自数据属性生成的代码

$(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 
});

这将带来麻烦？

来源

2013-11-21 nonsensecreativity

不会做麻烦，但选择ID是最快和最可靠的去。另外，不要混合使用数据属性和jquery的.data（）函数 – Alex

，jQuery中的.data（）函数使用内部系统来存储变量，它也读取'data-'属性来填充它，所以如果你（'hello'，'world'）;'然后尝试访问数据属性'data-hello'就不会有定义的值，或者如果你没有定义它，该值不会改变，并且jQuery在初始化之后将始终使用它的内部值。 –

对不起，我是javascript的noob，但我搜索谷歌和抓取数据属性的方式是使用.data（）函数，我在这里错了吗？ – nonsensecreativity

$(document).ready(function(){ 

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

});

上面的代码将无法正常工作。如果要读使用jQuery。数据（元素的HTML5数据属性）方法首先需要使用一个jQuery选择器选择相关的元素，然后可以使用的方法如下所示：

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

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

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

您在之前选择属性的方式。每（）方法将工作：

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

但是，它会更好，如果你可以缩小它像一个特定的元素：

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

这是因为，第一选择会经过的每一个节点在文档中需要更多时间，而第二个文档只能通过文档中的div标签。

来源

2013-11-21 10:32:10 pdp2

感谢您的详细解释：D，它看起来最好的方式是使用缩小选择器：D – nonsensecreativity

属性选择器由本机查询选择器支持，所以很好。就未来而言，我认为在不久的将来这将是一个问题。

但它会更好，如果你可以使用连接到属性选择一个元素选择像$('div[data-suffix-attribute="delete"]')

如果你对性能非常担心这将是一个更好的选择，一类属性添加到所需的元素和然后使用类选择

来源

2013-11-21 09:19:44

这将是更好地使用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

来源

2013-11-21 09:22:53

使用jQuery选择HTML5数据属性

回答

相关问题