设置自定义数据属性 jQuery 错误

Question

我实在想不通。我试图向某些元素添加 data-diff 属性。似乎有效，但 html 中没有出现这样的属性。我觉得没什么大不了的，打开开发者工具，我的思路是这样的：

让我们再次设置此属性：

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 元素与 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
});

Answer 1

jQuery .data() 方法根本不这样做。它将从 DOM 元素读取 data-foo 属性，但从不添加它们。

除非您将 jQuery 与其他希望找到这些属性的框架混合使用（我想可能包括一些 CSS），否则将属性放在DOM.

Answer 2

这是正常行为。

jQuery的data()方法的setter只更新jQuery保存在内存中的对象DOM 中的所有 data-* 属性。只要您只使用 data() 来获取和设置值，这就不是问题。事实上它更快。

要使 data-* 属性真正出现在 DOM 中，您需要使用 attr()，但效率较低。例如：

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

您可以通过 DOM 中的 data-* 属性 select 元素，就像您使用任何其他属性一样：

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

或者，如果你想 select 一个元素的内存数据属性（就像你在使用 data() 设置属性时所做的那样），使用 filter():

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

设置自定义数据属性 jQuery 错误

Setting custom data attribute with jQuery error

html

javascript

jquery

custom-data-attribute

console.log