javascript - 多次运行脚本后找不到元素的实时计数

Question

我有一个元素列表。单击链接后，我想按类过滤元素。 (到目前为止还好)。麻烦:如果该类没有元素，我想打印一条消息来说明这一点。

$('.filterEventsLinks a').click(function(){
     // count total number of events
     var evCount = $('.singleEvent').length;

     // a list of comma-separated class names to filter are stored in the data attribute of the fired element
     // for example: <a data-category="kids,teens,adults" href="#"></a>
     var cats = $(this).data('category');

     // split into an array
     var catArr = cats.split(',');

    // loop through
    for(var i in catArr) {
        var cat = '.CAT-' + catArr[i];

        // hide things that do not have this category
        $('.singleEvent').not(cat).slideUp(200);
        // show things that do
        $(cat).slideDown(200);

    }

    // count number of remaining visible elements
    var evCount = $('.singleEvent').filter(':visible').length;

    // do more...
});

除了最后一行之外，这里的一切都按预期工作。最后一行似乎不起作用。它始终返回存在的元素数量，而不是当前可见的数量。

此问题中列出的相同问题:Count number of elements in list after slideup/slidedown

Answer 1

您可以构建一个选择器来一次匹配所有类别，而不是循环遍历数据属性中的类别:

$('.filterEventsLinks a').click(function(){    
     var cats = $(this).data('category');
     //create a selector to match the categories
     var selector = '.CAT-' + cats.split(',').join(',.CAT-');

     //get filtered elements
     var $elems = $(selector);
     // hide things that do not have this category
     $('.singleEvent').not($elems).slideUp(200);
     // show things that do
     $elems.slideDown(200);

     // count number of remaining visible elements
     var evCount = $elems.length;
});