當隱藏元素存在時，如何使用第 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 中，並保留其原始順序。

示範

以下是示範解決方案的示範：

[DEMO FIDDLE]

透過使用.detach() 方法，您可以在不破壞第 n個子選擇器邏輯的情況下切換元素的可見性，確保網格中的每一行都保持其所需的外觀。

以上是當隱藏元素存在時，如何使用第 n 個子選擇器正確設定行樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！