Question

我有一个包含多个部分的页面。每个部分都包含一个徽章，显示某些项目的总计数。

<span class="badge">4</span>

我需要能够判断页面上的所有徽章是否都为零。我应该循环并将它们全部添加起来以查看总数是否结束＆＃34; 0＆＃34;？

var cnt = 0;

$('.badge').each(function() {   
   cnt = cnt + $(this).val;
});

if (cnt > 0) {
   // more than 0
}

看起来效率不高......必须有更好的方法。

Answer 1

一种方法是获取您正在测试的所有元素，然后过滤该集合以移除那些非零的元素并比较两组的长度;总结似乎没必要：

var badges = $('.badge'),
    zeroBadges = badges.filter(function(){
        return parseInt(this.textContent, 10) === 0;
    }),
    allAreZero = badges.length === zeroBadges; // true/false

或者您可以使用Array.prototype.every()：

var allAreZero = $('.badge').get().every(function (el){
        return parseInt(el.textContent, 10) === 0;
    }); // true/false

或者，在纯JavaScript中采用相同的方法：

var badges = document.querySelectorAll('.badge'),
    allAreZero = Array.prototype.every.call(badges, function (el) {
        return parseInt(el.textContent, 10) === 0;
    });

参考文献：

JavaScript的：
- Array.prototype.every()。
- Function.prototype.call()。
- Node.textContent。
- parseInt()。
jQuery的：
- filter()。
- get()。

Answer 2

不是将它们全部添加，而是可以循环遍历它们并测试每个值以查看值是否为零。如果您发现非零徽章值，则可以停止测试并做出反应。

或者，您可以在输出值时为徽章指定其他类，具体取决于它们是否为零。像这样：

<span class="badge badge-zero">0</span>
<span class="badge badge-nonzero">4</span>

然后，您可以通过选择一组非零徽章让jQuery为您完成工作：

if($("span.badge.badge-nonzero").length > 0){
    //You have some non-zero badges, do something
}

Answer 3

我建议您使用.html（），除非您在范围内有其他html内容。

var cnt = 0;

$('.badge').each(function() {
   var badge = $(this).html();
   cnt = cnt + parseInt(badge);
});

if (cnt > 0) {
   // more than 0
}

添加徽章总数

3 个答案: