特定のクラス名から3の倍数のコンテンツを取り出し、スタイルを適応させたい

Question

HTMLの中からis-activeというボックスの3の倍数のみにスタイルを適用させたいです。
is-activeの数を数えたあとか違う気がするのですが
教えていただきたいです

<div class="outerBox">
<div class="box"></div>
<div class="box"></div>
<div class="box is-active"></div>
<div class="box"></div>
<div class="box is-active"></div>
<div class="box is-active"></div>
<div class="box is-active"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div> 
<div class="box is-active"></div>
<div class="box is-active"></div>
<div class="box is-active"></div>
<div class="box is-active"></div>
</div>
<!-- /.outerBox-->

$(function(){
 $('.outerBox .box').each(function () {
  var count = $(this).find('.outerBox .is-active').length;
   for (var i = 0; i < $(count).length; i++) {
    if((i % 3) == 0) {
      $(this).css({
        marginRight: '0'
      });
    } 
  }
 });
}); 

追加説明しますとフィルター機能を使って.is-activeのボックスだけ表示、
そのなかから3の倍数のボックスにスタイルを適用したいのですが、
.boxのみのクラスのもカウントされているらしくCSSが適用されません。

$('.menuProduct .sort').each(function(){
    $(this).click(function(){ 
      var value = $(this).attr('data-filter');
      var activeClass = 'is-active';
    if (value == 'all') {
      $('.outerBox .box').show().addClass(activeClass);
    } else {
      $('.outerBox .box').not('.'+value).hide().removeClass(activeClass);
      $('.outerBox .box').filter('.'+value).show().addClass(activeClass);
    }
    $(document).on('click', '.sort', function () {
      $('.sort').removeClass('select');
      $(this).addClass('select');
    });
    });
  });

Comments

[meg_]

> is-activeの数を数えたあとか違う気がする
すみませんが上記文章の意味が分かりません。

Answer 1

 $('.outerBox .box').each(function () {
  var count = $(this).find('.outerBox .is-active').length;

this は .box ですから、その中に .outerBox .is-active は存在しません。

   for (var i = 0; i < $(count).length; i++) {

count が既に長さの数値なのに、その.lengthを参照しようとしています。

    if((i % 3) == 0) {

「3の倍数」が 3番目、6番目、9番目…とすると、配列の添字でいうと、[2] [5] [8] … です。

修正すると以下のようになります。

$('.outerBox .box.is-active').each(function(i, element) {
  if (i % 3 == 2)
    $(element).css({marginRight: '0'});
});

Answer 2

$(function(){
  $('.box.is-active').filter(function(x){return x%3==2;}).css('backgroundColor','red');
});