使用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错误设置自定义数据属性

回答

相关问题