使用jQuery计算活动过滤器并将其插入属性中

Question

我在Wordpress上使用FacetWP和这个jQuery片段来指示一个方面是否是活动的：

(function($) {
  $(document).on('facetwp-loaded', function() {
    $.each(FWP.facets, function(name, vals) {
      if (FWP.facets[name].length > 0) {
        $('.facetwp-facet-' + name).parent().addClass('is-active');
      }
      else {
        $('.facetwp-facet-' + name).parent().removeClass('is-active');
      }
    });
  });
})(jQuery);

CSS：

.facet-wrap.is-active h3.facet-label::after {
    content: "Active";
}

HTML如下所示：

<div class="facet-wrap is-active">
    <h3 class="facet-label">Color</h3>
    <div class="facetwp-facet facetwp-facet-color facetwp-type-checkboxes">
        <div class="facetwp-checkbox checked" data-value="green">Green</div>
        <div class="facetwp-checkbox checked" data-value="black">Black</div>
        <div class="facetwp-checkbox" data-value="yellow">Yellow</div>
        <div class="facetwp-checkbox" data-value="orange">Orange</div>
    </div>
</div>

如何改进这个jQuery片段，以计算有多少是活动的，并在每个方面的标题H3处插入一个“活动检查”属性？

这样我就可以像这样展示它：

​

h3.facet-label::after {
  content: attr(active-checked);
  margin-left: 8px;
  color: red;
}

<h3 class="facet-label" active-checked="2">Color</h3>

​

Answer 1

这个问题尚未得到回答，我与大家分享我所取得的成就：

(function($) {
    document.addEventListener('facetwp-loaded', function() {
        $.each(FWP.facets, function(name, val) {
            var length = $('.facetwp-facet-' + name).children('.checked').length;
            if (length > 0) {
                $('.facet-wrap .facetwp-facet-' + name).parent().attr('active-checked', length);
            } else {
                $('.facet-wrap .facetwp-facet-' + name).parent().removeAttr('active-checked');
            }
        });
    });
})(jQuery);

很简单。