当隐藏元素存在时，如何使用第 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中文网其他相关文章！