1

我有下面的代码，我想计算每个类的数量并将其显示在 mytotal

<ul>
    <li class="myid-1">AAA</li>
    <li class="myid-1">AAA</li>
    <li class="myid-2">BBB</li>
    <li class="myid-1">AAA</li>
</ul>
<div id="mytotal">
    <span id="item-1">AAA</span>
    <span id="item-2">BBB</span>
    <span id="item-3">CCC</span>
</div>

<script>
var id = '';
var cnt = '';

$('li').each(function (index, value) {
    id = jQuery(this).attr('class') || '';
    id = id.replace(/myid-/, '');
    var cnt = jQuery("li.myid-" + id).length;
});

$('#mytotal span').each(function (index, value) {
    id = jQuery(this).attr('id') || '';
    id = id.replace(/aaa-/, '');
    jQuery("#aaa-" + id).append(' (' + cnt + ')');
});
</script>

预期结果如下

AAA (3)
BBB (1)
CCC (0)

但是我得到

AAA
BBB
CCC

我知道这与我使用变量的方式有关，因为它没有执行，让这个工作的最佳方法是什么？

4

2 回答 2

2

换个角度想吧。您循环了两次，这是不必要的，并且您设置cnt了在局部变量上设置的内容，并且您没有跟踪每个变量的 cnt 。因此，遍历您的目标，选择 id 部分并检查相应 li 对应项的长度并相应地设置其自己的文本。另外，您可以避免处理已计算长度的相同 li 。

 $('#mytotal').children().text(function(_, cur){ //.text takes a function arg which is equivalent to doing a loop. cur represents the current test
    var id = this.id.replace(/item-/, ''); //get the part from id
    return cur + "(" + $("li.myid-" + id).length + ")"; //return the new text with old text + the length
});

演示

于 2013-10-09T01:42:56.187 回答
0

使用 JavaScript 对象，您可以将文本名称设置为对象中的键，然后在遍历列表时递增键。

var results = {};
var spans = $('#mytotal span').each(function(){
    results[$(this).text()] = 0;
});

$('li').each(function(){
    results[$(this).text()]++;
});

spans.each(function(){
    var el = $(this);
    id = el.attr('id') || '';
    id = id.replace(/aaa-/, '');
    jQuery("#aaa-" + id).append(' (' + results[el.text()] + ')');
});
于 2013-10-09T01:46:31.307 回答