通過jQuery中的類名稱獲取可見元素的動態計數

在鏈接的提琴中，我在jQuery中設置了一個複選框過濾器，用於按公司名稱和職位名稱過濾人員。我想要顯示/隱藏元素時動態更改的可見元素的總數。在小提琴中，我突出顯示了總元素數量，但當複選框被選中/取消選中時，它當前不會改變。我發現了幾個類似的問題，但我一直無法找到一種方法在我的代碼中實現這些建議以使計數動態化。任何幫助將不勝感激。通過jQuery中的類名稱獲取可見元素的動態計數

http://jsfiddle.net/point71echo/fnzag0pp/6/

下面是我使用的jQuery代碼：

$(function() { 
     $('.peoples, .companies').on('click', function() { 
      var checkedPeoples = $('.peoples:checked'); 
      var checkedCompanies = $('.companies:checked'); 
      if (checkedPeoples.length || checkedCompanies.length) { 
       if (checkedCompanies.length === 0) { 
        $('.row > div').hide(); 
        $.each(checkedPeoples, function() { 
         var prdId = $(this).attr('data-id'); 
         $('.row > div[data-category="' + prdId + '"]').show(); 
        }); 
       } else if (checkedPeoples.length === 0) { 
        $('.row > div').hide(); 
        $.each(checkedCompanies, function() { 
         var brandId = $(this).attr('data-id'); 
         $('.row > div[company="' + brandId + '"]').show(); 
        }); 
       } else { 
        $('.row > div').hide(); 
        $.each(checkedPeoples, function() { 
         var prdId = $(this).attr('data-id'); 
         $.each(checkedCompanies, function() { 
          var brandId = $(this).attr('data-id'); 
          $('.row > div[data-category="' + prdId + '"][company="' + brandId + '"]').show(); 
         }); 
        }); 
       } 
      } else { 
       $('.row > div').show(); 
      } 
     }); 
    }); 

// Total count of elements (visible and invisible)... 
var x = $('.people:visible').length; 
$('#count').append(x);

來源

2014-11-08 point71echo

你有2班「人「最後有一個」s「......我認爲這是一個錯字？（在一張挑剔的紙條上「people」已經是複數形式，沒有必要使用「s」;-) – scunliffe 2014-11-08 16:31:40

至於動態問題，在複選框（和/或任何顯示/隱藏它們）上的簡單更改事件處理程序，可以做快速重新計算。 – scunliffe 2014-11-08 16:34:25

這就像在你的事件處理程序的底部開始計算的可視元素和改變HTML一樣容易

$('#count').html($('.people:visible').length);

FIDDLE

來源

2014-11-08 16:33:17 adeneo

這是完美的。感謝您提供這個快速簡單的解決方案。 – point71echo 2014-11-08 16:39:26

通過jQuery中的類名稱獲取可見元素的動態計數

回答

相關問題