CSSのn番目の子セレクターのカウントから非表示の要素を除外する方法は?

CSS の n 番目の子セレクターで非表示の要素を回避する方法

表示で要素を非表示にする場合: ボタンのクリックを使用しない場合、n 番目の子セレクターは表示項目と非表示項目の両方を考慮します。 。これにより、異なる行を対象としたスタイル パターンが中断される可能性があります。

説明:

CSS の nth-child() セレクターは、兄弟間の位置に基づいて要素を照合します。ただし、display: none を使用しても非表示の要素が DOM に残り、カウントが正しく行われません。

解決策:

n 番目の子のカウントから非表示の要素を除外するには場合は、DOM から完全に削除する必要があります。ただし、remove() メソッドを使用すると、後で復元できなくなり、機能の切り替えが妨げられます。

代替アプローチ:

代わりに、jQuery の detach() メソッドを使用します。イベント リスナーとその他のメタデータを保持します。方法は次のとおりです:

var divs;

$('.photos-board-item').each(function(i){
    $(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();
    }
});

説明:

このコードは、正しい n 番目の子の数を維持しながら、選択した div の可視性を切り替えます:

1. 切り離された div を divs 変数に保存します。
2. divs が空でない場合は、以前にクリックされています。 initial-index データ属性に基づいて、div を元の順序で行に追加します。
3. div が空の場合は、指定された div を切り離し、div に保存します。

利点:

• 非表示の要素にもかかわらず n 番目の子の精度を維持します。
• 視覚的なデザインを中断することなく、表示を簡単に切り替えることができます。
• いいえHTML または CSS への変更が必要です。

以上がCSSのn番目の子セレクターのカウントから非表示の要素を除外する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。