通过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中的类名称获取可见元素的动态计数

回答

相关问题