質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 198

score 23

リスト表示している項目の背景色をつけているのですが、出しわけしてしまうとその順番がぐちゃぐちゃになるので、
表示されているリストのみで背景色の付け方を整えたいのですが、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;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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でのデモ

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/06/04 10:32

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

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

    やりたいのは

    2列で並んでいるもの

    1 2
    3 4
    5 6
    7 8

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

    キャンセル

  • 2021/06/04 11:12

    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)

    キャンセル

  • 2021/06/04 12:27

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る