訪問JQuery元素 - $ .data

Question

我如何訪問JQuery元素。

我創建的元素：

var el = $('<div></div>'); 

$.data(el, 'data', {first: 'first'}); 

$('body').append(el); 

我可以讀取數據：

$.data(el, 'data').first 

但我需要通過HTML標籤或類閱讀：

$.data('div', 'data').first 

這可能嗎？

JSFIDDLE

謝謝！

Answer 1

首先要小心你如何使用jQuery.data因爲它是一種低級方法。它不是用於jQuery元素，而是用於原始DOM元素。根據jQuery.data(element, key, value),element需要DOM元素與數據相關聯。我要強調的DOM，因爲你正在傳遞一個jQuery代替相應的DOM元素來$.data：

var el = $('<div></div>'); 
$.data(el, 'data', {first: 'first'}); 

你應該通過實際的DOM元素，而不是：

$.data(el[0], 'data', {first: 'first'}) 

然後你就可以恢復在data場在幾個方面：

// Using the jQuery.data method. 
$.data(el[0], 'data').first 
$.data($('div')[0], 'data').first 

// Using the more convenient contextual method .data 
el.data('data').first 
$('div').data('data').first 

// Combining jQuery and vanilla js 
$.data(document.getElementsByTagName('div')[0], 'data').first 

但是，怎麼會是下面的語句得到適當的存儲的數據的屬性？

$.data(el, 'data').first 

正如你所呼叫的jQuery.data用jQuery的元素要添加data屬性jQuery的包裝元素，而不是包裝的DOM元素。因此，要檢索該data領域唯一的方法是使用相同的對象：

$.data(el, 'data').first 
el.data('data').first 

但是，一旦el參考消失了，你是不是要能夠再次恢復data屬性。因爲正如我之前所說的，您不會將此data屬性存儲在DOM模型中，而是存儲在局部變量中。

Answer 2

如果我跟着你正確，使用數據API jQuery對象本身：

$('div').first().data() 

Answer 3

根據最終的目標，我要麼只保存變量在JavaScript，或者添加額外的數據屬性到你的div以便稍後輕鬆選擇。

，所以你可以做

$('<div />', { 'data-has-data': 'true' }).data({ first: 'first' }).appendTo('body'); 

，然後您可以稍後

$('div[data-has-data]').data().first 

，或者你可以做

var el = $('<div />').data({ first: 'first' }).appendTo('body'); 

// to access later 
var firstData = el.data().first;