jquery - 具有多个 Div 的 CSS 第 n 次查询

Question

我的设置类似于

<div class="charts">Content</div>
<div class="tables">Content</div>
....
<div class="charts">Content</div>
<div class="tables">Content</div>

它会重复几次。我的CSS如下

.left {
    width: 32%;
    float: left;
    margin: 5px;
}
div.tables:nth-child(3n+4) {
        clear: both;
        background-color:red;
}
 div.charts:nth-child(3n+4) {
        clear: both;
        background-color:green;
}

使用 jQuery，我最初使用 charts 类隐藏所有 DIV 元素，并使用单击功能，然后显示所有图表并隐藏所有表格 DIV。 CSS

然而，加载页面后，仍然可以识别名为 charts 的 DIV 元素，这意味着显示第一个 tables DIV，然后有两个空白槽，我可以在其中显示想要另外两个 DIV，并显示一类tables。

希望这个 jsfiddle 有意义 http://jsfiddle.net/gyjJU/3/还有http://jsfiddle.net/gyjJU/4/

Answer 1

我认为您只需更改 CSS 选择器以考虑隐藏的交替元素即可获得所需的结果:

div.tables:nth-child(6n+8) {
    clear: both;
    background-color:red;
}
div.charts:nth-child(6n+7) {
    clear: both;
    background-color:green;
}

http://jsfiddle.net/mblase75/gyjJU/5/