nth-child セレクターがグリッド レイアウトの非表示要素を無視するようにするにはどうすればよいですか?

n 番目の子セレクターで非表示の DIV をスキップします

問題:

n 番目の子セレクターを使用する場合- グリッド レイアウト内の要素をスタイル設定するための子セレクター。非表示の要素も兄弟としてカウントされます。

純粋な CSS ソリューション (不可能):

n 番目の子セレクターは、可視性に関係なくすべての兄弟を考慮するため、無視することはできません。 CSS のみを使用した非表示要素。

jQuery解決策:

この問題を解決するには、jQuery を使用して DOM から非表示の要素を削除し、n 番目の子セレクターのカウントから事実上「除外」します。変更されたコードは次のとおりです:

<br>var divs;</p>
<p>$('.photos-board-item').each(function(i){</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$(this).data('initial-index', i);

ログイン後にコピー

});

$('.hide -その他').on('クリック', function () {

if(divs) {
    $(divs).appendTo('.row').each(function(){
        var oldIndex = $(this).data('initial-index');
        $('.photos-board-item').eq(oldIndex).before(this);
    });
    divs = null;
} else {
    divs = $('.css--all-photo').detach();
}

});

説明:

• ページの読み込み時に、各項目

• 「他を隠す」の場合ボタンがクリックされる:

  • 非表示の div が存在する場合、それらはグリッドに再アタッチされます。
  • 非表示の div が存在しない場合、クラス「css--all-」を持つ要素photo" はグリッドから切り離され、DOM と n 番目の子から除外されます。

この jQuery ベースのアプローチを使用すると、n 番目の子セレクターは表示されている兄弟のみをカウントし、非表示の div または非表示の div の数に関係なく、目的のグリッド スタイルを保証します。

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