如何使用jquery操作元素，使它们与css选择器"nth-of-type"匹配

Question

我创建了一个库，其中包含href中的图像，这些图像由javascript根据它们的类（.cata、.catb、.catc）进行过滤。

<div class="section galleryholder">
    <a href="images/trends1.jpg" class="eb cata"><img src="images/trends1.jpg" /></a>
    <a href="images/trends2.jpg" class="eb catb"><img src="images/trends1.jpg" /></a>
    <a href="images/trends3.jpg" class="eb cata"><img src="images/trends1.jpg" /></a>
    <a href="images/trends4.jpg" class="eb catc"><img src="images/trends1.jpg" /></a>
    <a href="images/trends5.jpg" class="eb catb"><img src="images/trends1.jpg" /></a>
</div>

我已经通过css应用了一些样式，这些样式根据类型为的css选择器nth在网格中显示不同的href和包含的图像

.eb{
    float:left;
    display:inline-block;
    width:33.33333333%;
    margin:0;
    position:relative;
    text-decoration:none;
    overflow:hidden;
}
.eb:nth-of-type(3n+1) {
    width:66.66666667%;
}
.eb:nth-of-type(6n+1), .eb:nth-of-type(6n+2), .eb:nth-of-type(6n+3){
    float:right;
}
.eb img{
    width:100%;
    height:auto;
}

目前，我通过jquery（使用.hide()和.show()）在我的图库中隐藏和显示href。问题是，css中应用的第n个类型选择器当然不会重新绘制所显示的元素，因为这些元素不会从DOM中删除，只是隐藏起来。

由于我希望能够再次显示隐藏的元素，我认为从DOM中删除匹配的元素不是一个好的做法，所以我决定将.eb元素的类切换到另一个类。但这不会给我css再次计算匹配元素并应用适当样式的期望结果。

有什么建议吗？

Answer 1

很难说出你想要完成什么。。。但是，从代码的编写方式和您正在编写的页面示例来看，使用jQuery向某些元素添加/删除类，而不是依赖CSS，这不是更有意义吗？

$( ".eb:nth-of-type(3n+1)" ).addClass( "eb-wide" );

然后设置你的类：

.eb:nth-of-type(3n+1) {
    width:66.66666667%;
}

改为：

.eb-wide {
    width:66.66666667%;
}

如果这不起作用，您可以简单地在JavaScript中编写一个循环，循环遍历可见元素，并在每次单击触发器时向其中添加/删除一个类。我认为这将更有意义，因为无论如何您都在使用JS操作元素，并且仍然可以让CSS控制设计。

Answer 2

我的问题解决方案如下：我克隆了元素并更改了它们的类，将它们封装在div中，并将div定位在原始元素之后。然后我从dom中删除了原始元素。为了再次显示元素，我打开它们并更改了它们的类。