使用jQuery錯誤設置自定義數據屬性

我只是無法用頭包住這個。我試圖給某些元素添加一個data-diff屬性。似乎工作，但沒有這樣的屬性出現在HTML中。沒什麼大不了的，我想，打開開發者工具和我的思考線索是這樣的：使用jQuery錯誤設置自定義數據屬性

讓我們重新設置該屬性：

console: $(obj).data('diff','10'); 

output: [div.cont]

好，讓我們檢查則屬性：

console: $(obj).data('diff') 

output: "10"

太棒了，但它仍然沒有出現在HTML中，我們來看看這個：

console: $(obj)[0] 

output: 

    <div class="cont" data-month="8" data-round="1"> 
     (Tom) 8 
     <div class="secCol">AUG</div> 
    </div>

嗯，確實不存在數據差異，也許如果我試試這個：

console: $(obj)[0].data('diff','10') 

output: Uncaught TypeError: $(...)[0].data is not a function(…)

我猜它是與DOM元素VS jQuery的對象（已讀this），但我不知道什麼嘗試。我的代碼是這樣的：

$('.cont[data-round="'+round+'"]').each(function(i, obj) { 
    var month = $(obj).data('month'); 
    var diff = Math.abs(myMonth-month); 
    $(obj).data('diff', diff);//Here is the problem 
});

來源

2016-11-23 Theodore K.

'$（OBJ）[0]'給你的HTML元素，'。數據（）'是一個jQuery˚F結。解決方案：'$（$（obj）[0]）。data（'diff'）' –

這是正常行爲。

jQuery的data()方法的制定者只更新對象的jQuery在內存中存儲其持有的DOM中的所有data-*屬性。只要您只使用data()來獲取和設置值，這不是問題。事實上它更快。

實際上，要在DOM中出現data-*屬性，您需要使用attr()，但效率會降低。例如：

$(obj).attr('data-diff', diff);

您可以選擇的元素通過它在DOM data-*屬性，你會任何其他屬性：

var $foo = $('.foo[data-bar="fizz"]')

另外，如果你想選擇一個元素通過它的內存數據屬性（就像使用data()何時設置屬性），使用filter()：

var $foo = $('.foo').filter(function() { 
    return $(this).data('bar') === 'fizz'; 
});

來源

2016-11-23 13:44:19

jQuery的.data()方法根本沒有做到這一點。它將從DOM元素的讀取data-foo屬性，但它永遠不會添加它們。

除非您將jQuery與其他一些希望找到這些屬性的框架（其中可能包括一些CSS，我猜想）混合在一起，否則將屬性放在DOM中確實沒什麼意義。

來源

2016-11-23 13:43:54 Pointy

如何通過data-diff = 10（例如）選擇元素？ '$（'。cont [data-diff =「10」]'）'什麼都不返回。 –

@TheodoreK。是的，如果您有興趣使用數據屬性作爲解決DOM中元素的方法，那麼您需要創建屬性。我個人會在課堂上做，但那只是我。無論如何，這是幾年前jQuery設計決定不這樣做。 – Pointy

使用jQuery錯誤設置自定義數據屬性

回答

相關問題