0

要素のリストがあります。リンクをクリックすると、要素をクラスでフィルタリングしたいと考えています。（今のところ大丈夫です）。問題: そのクラスの要素がない場合、そのことを示すメッセージを出力したい。

$('.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...
});

最後の行を除いて、ここのすべてが期待どおりに機能します。うまくいかないように見える最後の行。現在表示されている数ではなく、常に存在する要素の数を返します。

この SO の質問に記載されている同じ問題:スライドアップ/スライドダウン後にリスト内の要素数をカウントする

4

3 に答える 3

3

data-attribute 内のカテゴリをループする代わりに、それらすべてを一度に照合するセレクタを作成できます。

$('.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;
});
于 2013-09-10T18:39:41.107 に答える
2

アニメーションが完了したら、要素をカウントする必要があります。要素がアニメーション化されている場合、要素は引き続き表示されます。または、要素をコレクションに保持してカウントすることもできます。

$('.filterEventsLinks a').click(function(){
     var evCount = $('.singleEvent').length,
         cats    = $(this).data('category').split(','),
         elems   = $([]);

     $.each(cats, function(_, cat) {
        var _cat = $('.CAT-' + cat);
        $('.singleEvent').not(_cat).slideUp(200);
        _cat.slideDown(200);
        elems = elems.add(_cat);
    }

    // you're sliding all .singleEvent elements except "elems" up, so just count
    // the elements in "elems" instead, as that should be the visible ones
    var evCount = elems.length;
});
于 2013-09-10T18:30:10.190 に答える
0

現在表示されている要素を数える代わりに、以前に使用したのと同じ基準を使用して、それらを数えました。

$(cat).length;

これは、この全体をはるかに簡単に回避する方法でした。

于 2013-09-10T19:04:45.283 に答える