javascript - 遍历所有跨度并使用 JQuery 更新一个字段

Question

我的 html 代码中有几个跨度，我将更新其中一个。因此，我在该跨度的属性 data-id 中为每个跨度赋予了一个唯一编号。该跨度还有一个名为 votes 的类。

现在的问题是，如果我遍历所有跨度，我会检查元素的 data-id 是否等于我通过 SignalR 方法从服务器接收到的 id。

这是一些 html:

<span data-id="7" class="votes">3</span>
<span data-id="9" class="votes">-1</span>

下面的代码不会更新我将更新的跨度。

var voteSpans = $(".votes");
var number = voteSpans.length;

for (var i = 0; i < number; i++) {

    if (voteSpans[i].dataset.id == receivedId) {

        var oldVotes= parseInt(voteSpans[i].html());
        voteSpans[i].html(oldVotes+ parseInt(newVotes));
    }
}

但是这段代码会更新类 votes 的所有范围:

var voteSpans = $(".votes");
var number = voteSpans.length;

for (var i = 0; i < number; i++) {

    if (voteSpans[i].dataset.id == receivedId) {

        var oldVotes= parseInt(voteSpans[i].html());
        voteSpans.html(oldVotes+ parseInt(newVotes));
    }
}

查看最后一行代码之间的差异。

这是怎么来的？

Answer 1

那是因为您使用括号符号来获取元素。 jQuery 对象是一个类似数组的对象。如果您使用括号表示法，则返回指定索引处的值。

返回值是一个没有 html 方法的 DOM 元素。使用 eq 方法代替它通过索引获取元素，但返回值是一个 jQuery 包装的对象:

voteSpans.eq(i).html(oldVotes+ parseInt(newVotes));

另请注意，dataset 属性并未得到广泛支持。考虑改用 jQuery .data() 方法。下面是一个使用 jQuery 方法的例子:

$(".votes").filter(function() {
    return $(this).data('id') === receivedId;
}).text(function(_, oldVotes) {
    return +oldVotes + parseInt(newVotes, 10);
});