質問: g } }); }); ``` ``` .all li:nth-child(4n+1),&:nth-child(4n+4){ background:#f5f5f5; } ```
回答: jqueryに限ったことではないですが、セレクタでの指定において疑似クラスの指定はそれぞれ独立して条件を判断する動きになります。 例えば、 ``` データ1 データ2 データ3 データ4 データ5 データ6 データ7 データ8 データ9 ``` ``` .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でのデモ