如何使第 n 个子选择器忽略网格布局中的隐藏元素？

跳过第 n 个子选择器中的隐藏 DIV

问题：

使用第 n 个时- 网格布局中样式元素的子选择器，隐藏元素仍被视为同级元素，从而破坏了所需的样式。

纯 CSS 解决方案（不可能）：

nth-child 选择器会考虑所有兄弟元素，无论其可见性如何，因此仅使用 CSS 无法忽略隐藏元素。

jQuery 解决方案：

解决此问题，我们可以使用 jQuery 从 DOM 中删除隐藏元素，从而有效地将它们从第 n 个子选择器的计数中“排除”。修改后的代码如下：

<br>var divs;<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。

以上是如何使第 n 个子选择器忽略网格布局中的隐藏元素？的详细内容。更多信息请关注PHP中文网其他相关文章！