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()方法仅的setter更新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';
});

Answer 2

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

除非你将jQuery与其他一些希望找到这些属性的框架混合在一起（可能包括我认为的一些CSS），否则将这些属性放在DOM中真的没什么意义。

使用jQuery错误

2 个答案: