jquery - 数据属性在DOM中已更改，但被jQuery忽略

我做了一个小提琴来显示问题：http://jsfiddle.net/nm3Ma/1/

采取这个HTML：

<div class="myclass" data-number="1"></div>
<div class="myclass" data-number="2"></div>
<div class="myclass" data-number="3"></div>

和这个js

$(".myclass").each(function(){
    var number = $(this).data('number');
    if( number>1 )
    {
        $(this).attr('data-number', number-1 );
    }
    $('body').append($(this).data('number')+'<br/>');
});

该代码实际上将HTML更改为：

<div class="myclass" data-number="1"></div>
<div class="myclass" data-number="1"></div>
<div class="myclass" data-number="2"></div>

但它仍然打印：

1
2
3

有人可以解释我在做什么错吗？谢谢。

最佳答案

jQuery使用内部数据结构存储数据值，如果在内部结构中未找到键，则data-*属性用于初始化数据值。因此，当您第二次读取该值时，它是从内部结构而不是属性中读取该值，因此对该属性所做的更改将对它不可见。

您需要使用.data()的setter版本来设置数据值

$(".myclass").each(function(){
    var number = $(this).data('number');
    if( number>1 )
    {
        $(this).data('number', number-1 );
    }
    $('body').append($(this).data('number')+'<br/>');
});

演示：Fiddle

或者使用attr()读取和写入值

$(".myclass").each(function () {
    var number = $(this).attr('data-number');
    if (number > 1) {
        $(this).attr('data-number', number - 1);
    }
    $('body').append($(this).attr('data-number') + '<br/>');
});

演示：Fiddle