非表示の要素が存在する場合に、n 番目の子セレクターを使用して行を正しくスタイル設定するにはどうすればよいですか?

n 番目の子セレクターを使用するときに非表示の要素をバイパスする方法

n 番目の子セレクターを使用すると、要素間の位置に基づいて要素をターゲットにすることができます。それらの兄弟要素。ただし、このセレクターは非表示の要素をカウントするため、グリッド内の特定の行を異なる表示にしたい場合に問題が発生する可能性があります。

あなたの場合、n 番目の子セレクターを使用して n 番目ごとの行の外観を変更しています。ブロックの格子の中にあります。 display: none を使用して一部のブロックを非表示にしても、n 番目の子セレクターは引き続きブロックをカウントし、間違ったスタイル設定につながります。

CSS ベースのソリューション

残念ながら、この問題に対する純粋な CSS ソリューション。 n 番目の子のセレクターは、可視性に関係なく、すべての兄弟を単純に調べます。

jQuery ベースのソリューション

n 番目の子の計算に非表示の要素が含まれないようにするには、次のようにします。非表示になっている場合は、DOM から削除する必要があります。 jQuery は、この目的のために .detach() メソッドを提供します。

$(".hide-others").click(function () {
  var divs;

  $(".photos-board-item").each(function (i) {
    $(this).data("initial-index", i);
  });

  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();
  }
});

このコードは、[他を非表示] ボタンがクリックされたときに、DOM から非表示の要素を削除します。ボタンを再度クリックすると、要素は元の順序を維持して DOM に再挿入されます。

デモ

解決策を示すデモは次のとおりです。

[デモフィドル]

.detach() を使用するメソッドを使用すると、n 番目の子セレクター ロジックを壊さずに要素の表示/非表示を切り替えることができ、グリッド内のすべての行が目的の外観を維持できるようになります。

以上が非表示の要素が存在する場合に、n 番目の子セレクターを使用して行を正しくスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。