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

我有几个随机块。每当一个街区落在新的一排，我就让它看起来不一样。当用户单击一个按钮时，我通过

display:none

隐藏了几个块，问题就出现了。

n个子项

选择器还对隐藏元素进行计数

有没有办法忽略这些特定的块，让每一行都有不同的样式？这是一个类似场景的示例

$（'.hide others'）。单击（函数（）{
$（'.css--all photo'）.toggleClass（'hidden'）；
})

.board项--内部{
高度：200px；
背景：番茄；
文本对齐：居中；
颜色：#fff；
字体大小：33px；
边缘底部：15px；
边框：2个实心番茄；
}
@介质（最小宽度：768px）和（最大宽度：991px）{
.董事会项目：第n个子（2n+1）.董事会项目-内部{
边框：2倍实心#000；
背景：黄色；
颜色：#000；
}
}
@介质（最小宽度：992px）和（最大宽度：1199px）{
.董事会项目：第n个子（3n+1）.董事会项目-内部{
边框：2倍实心#000；
背景：黄色；
颜色：#000；
}
}
@介质（最小宽度：1200px）{
.董事会项目：第n个子（4n+1）.董事会项目-内部{
边框：2倍实心#000；
背景：黄色；
颜色：#000；
} 
}

隐藏他人
1.
2.
3.
4.
5.
6.
7.
8.
9
0
10

这里是我的意思的一个例子： 在这种情况下，它将忽略类为

.css的元素——所有照片
。。。但是你可以使用任何你想忽略的类

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

你要找的是第n个类，不幸的是它不存在！
当你用JS切换隐藏类时，这是隐藏子类和显示子类之间的唯一区别，所以你需要告诉css计算某个类的div，
（让我们说“显示”），但不幸的是，cssnth子选择器并没有太多地关注子类。
你可以读更多

当用户单击一个按钮时，我通过
display:none
隐藏几个块，
问题就出现了。
n个子项
选择器也对隐藏项进行计数
元素

有没有办法忽略那些特定的块，这样每一行
有不同的风格吗

问题是无论样式如何，
nth-child（）
选择器都会查看同一父项下的所有同级。应用
display:none
并不重要，因为CSS不会从DOM中删除元素，因此它仍然是同级元素

根据规范：


：第n个子（an+b）
伪类表示法表示
文档中前面有+b-1同级的元素
树，表示n的任何正整数或零值，并具有父级
元素。（强调矿山）

为了让用户单击隐藏div后声明的第n个子规则起作用，您需要从DOM中删除隐藏的div，使它们不再作为同级存在

在您的问题中，您要求一个仅CSS的解决方案。但是在你的评论中，你说HTML是开放的，可以修改。您还可以使用一些jQuery来隐藏元素

只需在jQuery中添加一行代码，问题就可以得到解决：

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

从DOM中取出元素（及其子体）。在这种情况下，它将删除类
隐藏的所有元素


校正

remove（）
的问题是无法还原使用此方法从DOM中获取的元素，这会破坏切换函数

幸运的是，jQuery提供了另一种选择：

.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没有任何更改
 我会将类型选择器的
：n与切换功能的小修改结合起来

基本思想不是从DOM中删除那些
.css--所有的photo
元素，而是将它们包装到
容器中。和
unwrap（）
以恢复完整设置。在这种情况下，
：n类型的
将与您对
：n子项
所做的完全相同


var state=false；
$（'.hide others'）。单击（函数（）{
如果（！状态）{
$（'.css—所有照片'）。换行（'''）；
状态=真；
}否则{
$（“隐藏”）.unwrap（）；
状态=假；
}
})
隐藏{显示：无；}
.董事会项目-内部{
高度：200px；
背景：番茄；
文本对齐：居中；
颜色：#fff；
字体大小：33px；
边缘底部：15px；
边框：2个实心番茄；
}
@介质（最小宽度：768px）和（最大宽度：991px）{
分区板项目：第n个类型（2n+1）。板项目——内部{
边框：2倍实心#000；
背景：黄色；
颜色：#000；
}
}
@介质（最小宽度：992px）和（最大宽度：1199px）{
分区板项目：第n个类型（3n+1）。板项目——内部{
边框：2倍实心#000；
背景：黄色；
颜色：#000；
}
}
@介质（最小宽度：1200px）{
分区板项目：第n个类型（4n+1）。板项目——内部{
边框：2倍实心#000；
背景：黄色；
颜色：#000；
} 
}