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

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

問題:

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

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

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

jQuery ソリューション:

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

<br>var divs;</p>
<p>$('.photos-board-item').each(function(i){</p>
<pre class="brush:php;toolbar:false">$(this).data('initial-index', i);

});

$('.hide-others').on('click', 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();
}

});
< ;/pre>

説明:

• ページの読み込み時に、各項目に初期インデックスが与えられます。

• 「他を非表示」ボタンをクリックすると、

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

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

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