使用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數據屬性

回答

相關問題