:nth-child セレクターが非表示の要素を無視するようにするにはどうすればよいですか?

n 番目の子セレクターが非表示要素を無視するようにする方法

問題:

CSS 内:nth-child() セレクターは、計算で非表示の要素をカウントします。これにより、display: none を使用して要素を非表示にするときに中断が発生する可能性があります。

解決策:

非表示の要素を除外するには、DOM から完全に削除する必要があります。 CSS ベースのソリューションと jQuery ベースのソリューションを次に示します。

CSS ソリューション:

.hidden {
    display: none !important;
}

! important 宣言は、display: none ルールをオーバーライドし、完全に削除します。ページ レイアウトの要素。

jQuery解決策:

$('.hidden').remove();

remove() メソッドは、非表示の要素を DOM から物理的に削除し、:nth-child() セレクターによってカウントされないようにします。

例:

次の HTML について考えてみましょう。構造体:

<div class="container">
  <div class="item"></div>
  <div class="item hidden"></div>
  <div class="item"></div>
</div>

nth-child(2n) セレクターを使用すると、2 番目の項目がターゲットになります。ただし、display: none を使用して 2 番目の項目を非表示にしても、セレクターによってカウントされます。

提供された CSS または jQuery ソリューションを使用すると、非表示の要素は n 番目の要素によって考慮されなくなります。 child() セレクター。目的の効果が得られます。

以上が:nth-child セレクターが非表示の要素を無視するようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。