:visible 要素だけに :nth-childをつけたい

Question

リスト表示している項目の背景色をつけているのですが、出しわけしてしまうとその順番がぐちゃぐちゃになるので、
表示されているリストのみで背景色の付け方を整えたいのですが、jqueryではvisibleにどのようにnth-childをつければ良いのでしょうか？

$(function(){
  let previous = ''
  $('.search_item').on('click',function(){
    $(this).addClass('is-active').siblings().removeClass('is-active');
    var g=$(this).data('group');
    if(g=="" || g == previous){
      $('.online-shop-list li').show();
      $(this).removeClass('is-active');
      previous = ""
    }
    else{
      $('.online-shop-list li').hide();
      $('.online-shop-list').removeClass('all');
      $('.online-shop-list [data-group*='+g+']').show();
      $('.online-shop-list :visible:nth-child(4n+1)').addClass('bg'); ←こういうことがしたい
      $('.online-shop-list :visible:nth-child(4n+4)').addClass('bg'); ←こういうことがしたい
      previous = g
    }
  });
});

.all li:nth-child(4n+1),&:nth-child(4n+4){
background:#f5f5f5;
}

Answer 1

jqueryに限ったことではないですが、セレクタでの指定において疑似クラスの指定はそれぞれ独立して条件を判断する動きになります。
例えば、

<ul id="sample2">
  <li>データ1</li>
  <li class="hide">データ2</li>
  <li>データ3</li>
  <li>データ4</li>
  <li class="hide">データ5</li>
  <li>データ6</li>
  <li>データ7</li>
  <li>データ8</li>
  <li>データ9</li>
</ul>

.hide{ display: none; }

というhtmlがあった場合、

$('li:visible:nth-child(2n+1)')

の結果は、
liのうちvisibleのもの（データ1,3,4,6,7,8,9）のうちの2n+1番目（3,6,8)
ではなく、
liのうちvisibleのもの（データ1,3,4,6,7,8,9）かつ liのうち2n+1番目のもの（1,3,5,7,9) = (1,3,7,9)

という結果になります。

前者の結果を取得したいのであれば、セレクタだけでは不可能です。1つの方法としては:visibleセレクタで表示されているタグのみ抽出したのち、filter関数で奇数番目のデータを抽出するという手法があります。

var targets = $('#li:visible').filter((i,e) => i % 2 === 1);
targets.addClass('bg');

この方法では、liのうちvisibleのもの（データ1,3,4,6,7,8,9）を一旦抽出し、
filter関数でインデックス番号を2で割った余りが1のものを対象にaddClassしています。

codepenでのデモ

Comments

[M.Takeshita]

とてもわかりやすい回答ありがとうございます！

なるほど。単純に書き方が悪いだけでなく、抽出方法としても違っていた事がわかりました。
しかしfilter関数の理解が浅すぎる（単純な算数ができない）のでヒントが欲しいのですが、

やりたいのは

２列で並んでいるもの

１ ２
３ ４
５ ６
７ ８

とあった場合に2,3,6,7（もしくは1,4,5,8）に背景をつけたいという事で、この場合は
奇数や偶数というものに入れ込めないため、targetsを複数指定する必要があるという事でしょうか？

[hope_mucci]

4で割った余りが3か0であれば良いのでしょうか。（この場合1,4,5,8が該当）
その場合は、filter関数の部分を以下の様に書き換えれば良いです。
filter((i,e) => i % 4 === 3 || i % 4 === 0)
(2,3,6,7)の場合は4で割った余りが2か3になります。
filter((i,e) => i % 4 === 2 || i % 4 === 3)

[M.Takeshita]

100兆いいねくらい押したい気持ちです。
ご丁寧にありがとうございました。希望通りのソースができました！

CSSもjavascriptっぽくなったと思ったのですが、まだまだ考え方が違うのですね。。
割ったあまりで考えるとは。。まだ頭が追いつきません。
非常に勉強になりました。ありがとうございました！