Jquery - 为什么不能正确计数？

Question

当我加载页面时，它显示所有类别的计数器的正确值，但是当我在搜索字段中键入某个部分时，它会错误计算它。我在哪里弄错了？ 我有一些带有span元素的div，它们具有属性data-category

我有其他div，我有计数器，我想显示等于data-category的数字div的值

这是元素之一：

<div class="box col-md-12 app_box"  id="Acrobat Reader 10">
    <div class="thumbnail">
        <div class="caption">
            <div class="row" style="padding-top: 0; margin-top:0">
                <div class="pull-left">
                    <h3>Acrobat Reader 10</h3>
                </div>
                <div class="pull-right">
                    <h3><small>Adobe Systems</small></h3>
                </div>
            </div>
            <div class="row" style="padding-top: 0; padding-bottom: 0; margin-bottom: 0; margin-top: 0px">                
                <span class="label label-primary" data-category="-1" style="display:none"></span>
                                    <span class="label label-primary" data-category="1">
                                            New1
                                        </span>
                                    <span class="label label-primary" data-category="4">
                                            new4
                                        </span>
                            </div>
            <div class="row" style="padding-top: 0; padding-bottom: 0; margin-bottom: 0; margin-top:0">
                                    <p>Adobe® Reader® software is the free global standard for reliably viewing, printing, and commenting on PDF documents</p>
                            </div>
        </div>
    </div>
</div>

它包含2个span元素，data-category等于1和4 这就是我的计数器div的样子

    <div id="category_list" class="list-group">
        <a href="#" data-category="-1" class="list-group-item active">
            <span class="badge"></span>All applications</a>
                <a href="#" data-category="1" class="list-group-item">
            <span class="badge"></span>
                        New1
                    </a>          
                <a href="#" data-category="2" class="list-group-item">
            <span class="badge"></span>
                        new2
                    </a>          
                <a href="#" data-category="3" class="list-group-item">
            <span class="badge"></span>
                        new3
                    </a>          
                <a href="#" data-category="4" class="list-group-item">
            <span class="badge"></span>
                        new4
                    </a>          

    </div>

在span元素中，我想显示包含data-category的可见div编号

这是我的js：

$(document).ready(function() {

    count();

    $('#appName').changed(function(e) {
        e.preventDefault();
        search();
        count();
    });

    $("#category_list a").click(function(e) {
        e.preventDefault();
        $("#category_list a").removeClass('active');
        $(this).addClass('active');
        search();
    });

    function search() {
        var category = $("#category_list a.active").attr('data-category');
        var value = $('#appName').val();
        $('.app_box').each(function() {
            var box = $(this);
            if (box.find("[data-category='" + category + "']").length > 0) {
                if (box.find('h3').text().toLowerCase().indexOf(value.toLowerCase()) !== -1) {
                    box.fadeIn();
                }
                else
                    box.fadeOut();
            }
            else {
                box.fadeOut();
            }
        });
    }
    function count() {
        $('#category_list .badge').each(function() {
            var category = $(this).parent().attr('data-category');
            var counter = 0;
            $('.app_box').each(function() {
                var box = $(this);
                if (box.find("[data-category='" + category + "']").length > 0) {
                    if (box.is(':visible')) {
                        counter++;
                    }
                }
            });
            $(this).text(counter);
        });
    }
});

还有一个输入字段，我可以在js

中查看应用程序

<div class="col-lg-4 pull-right" style="margin-top: 25px;">
    <div class="input-group">
        <input id="appName" placeholder="Search for an app..." type="text" class="form-control">
        <span class="input-group-btn">
            <button id="buttonFind" class="btn btn-default" type="button">
                <i class="glyphicon glyphicon-search"></i>
            </button>
        </span>
    </div>
    <!-- /input-group -->
</div>