如何在jQuery中包装

Question

我有一个html格式的12盒子。

我想做三个积木，每个积木有4个盒子，然后我可以在我的设计中展示它们。

第一件事是

在每个块中，不是第一个，而是第二个、第三个或第四个块中的“box2”类不适用于所有三个块中的第一个。

所有3个框的代码都类似于

<div class="block>
<div class="box"></div>
<div class="box box2"></div>
<div class="box box2"></div>
<div class="box box2"></div>
</div>

我有相同的迭代，因为代码渲染由c#和他们渲染12个盒子谁没有box2类在第二，第三和第四个盒子。

我需要这样做：

将所有4个元素封装在块div中，因为它是12，所以它是make 3块，每个块都有4个元素。

Answer 1

您可以使用第n个子选择器来实现这一点。

例如，使用以下代码：

CSS:

.clear{
    clear:both;
    padding:0;
    margin:0;
}

.block{
        background-color:#999;
        width:500px;
        padding:10px 10px 0 10px;
    }

    .box{
        width:100px;
        height:100px;
        margin:0 10px 10px 0;
        background-color:#ccc;
        float:left;
        border:2px solid #000;
    }

    .box:nth-child(4n+1){
        border:2px solid #900;
    }

HTML

<div class="block">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="clear"></div>
</div>

​

​

第n个子选择器仅将样式应用于从第一个框开始的每四个框。因此，基本上，您可以将box2和box的样式(组合为一个类)分配给所有的DIV，然后使用第n个子选择器，将您选择的样式应用于box 1、5和9。

我希望这对你有帮助，丹