在所有跨度上循环并更新一个失败的whit JQuery

Loop over all spans and update one failed whit JQuery

本文关键字：一个 失败 JQuery whit 更新 循环      更新时间：2023-09-26

我的html代码中有几个跨度，我将更新其中一个。因此，我在每个跨度的属性data-id中给每个跨度一个唯一的数字。span还有一个名为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));
    }
}

请参阅最后一行代码之间的差异。

这是怎么回事？

这是因为您使用括号表示法来获取元素。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);
});

我想知道为什么您只使用.each()来循环使用.votes类的所有跨度，而使用.text()来表示跨度。不需要使用.html()，而您的情况下的跨度没有html。

$('.votes').each(function(){
    if($(this).attr('data-id') == receivedId){ //you can use $(this).data('id');
       var oldVotes= parseInt($(this).text());
       $(this).text(oldVotes + parseInt(newVotes));
    }
});

请注意，您不必循环遍历所有它们来进行比较。您可以直接访问：

var voteSpan = $(".votes[data-id="+receivedId+"]");
相关文章：