Question

我有以下代码，我想计算每个课程的数量，并在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

我知道这与我使用变量的方式有关，因为它没有完成，有什么最好的方法可以实现这个？

Answer 1

反思另一种方式。您循环两次这是不必要的，并设置在局部变量上设置的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
});

<强> Demo

Answer 2

使用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()] + ')');
});

jQuery计算列表中每个项目的总数

2 个答案: