如何使第n个子选择器跳过隐藏的div

如何使第n个子选择器跳过隐藏的div

当用户单击按钮时，我隐藏了的几个块

display:none

，并且出现了问题。该

nth-child

选择也算隐藏要素。

有没有办法忽略这些特定的块，以便每一行都具有不同的样式？

问题在于

nth-child()

选择器将查看同一个父对象下的所有同级对象，而不管样式如何。

display:none

因为CSS不会从DOM中删除元素，所以您应用了它并不重要，因此它仍然是同级的。

从规格：

6.6.5.2。

:nth-child()

伪类

:nth-child(an+b)

伪级符号表示元素，其具有+B-1的兄弟姐妹之前它在文档树中，对于任意的正整数或正的零值，并具有父元素。为了使

nth-child

您声明的规则在用户单击以隐藏div后起作用，您需要 从DOM中删除隐藏的div ，因此它们不再作为同级对象存在。

在您的问题中，您需要仅CSS的解决方案。但是在您的评论中，您说HTML可以进行更改。您还使用了一些jQuery来隐藏元素。

通过将一小段代码添加到jQuery，可以解决此问题：

$('.hidden').remove();

该

.remove()

方法将元素（及其后代）带出DOM。在这种情况下，它将删除带有class的所有元素

hidden

。

---

更正

问题

remove()

在于无法恢复使用此方法从DOM中获取的元素，这会破坏切换功能。

幸运的是，jQuery提供了一种替代方法：

detach()

。

该

.detach()

方法与相同

.remove()

，除了

.detach()

保留所有与删除的元素关联的jQuery数据。当稍后将删除的元素重新插入DOM时，此方法很有用。

因此，如果我们替换原始代码…

$('.hide-others').click(function () {    $('.css--all-photo').toggleClass('hidden');})

…使用此代码…

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

现在，无论隐藏了哪个div或隐藏了几个div，都可以在不中断视觉设计的情况下打开和关闭它们，因为

nth-child

选择器仅计算“可见”的同级对象。无需更改CSS。HTML不变。