Question

我有一些带显示的div：inline-block;我必须选择第一行div并将它们设置为不同的边框颜色，我需要在javaScript（jQuery）中进行。

上的示例

HTML：

<div class="container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item">item 6</div>
    <div class="item">item 7</div>
    <div class="item">item 8</div>
    <div class="item">item 9</div>
</div>

CSS：

.container {
    border: 1px solid red;
    padding: 10px;
}

.item {
    display: inline-block;
    border: 1px solid green;
    width: 200px;
    margin: 10px;
}

有办法怎么做？

Answer 1

你可以在jquery中使用vanilla CSS Selector 假设你有一个3 X 3的网格。

＆＃13;

$( ".container .item:nth-child(3n + 1)" ).css( "border-color","black" );

＆＃13;

Answer 2

您可以通过$（“。container”）获取容器的宽度，该容器的css样式名为“container”.width，

然后你可以计算出第一行中可以放入多少个div，并将它放在firstrow_divNums之类的变量中。

现在使用$（“。calculate”）。children（）来获取子div，

最后使用“for”循环从$（“。calculate”）。children（）。eq（0）到$（“。calculate”）。children（）。eq（firstrow_divNums），

现在您可以按照自己的意愿添加css样式到任何元素。

第一行内联块div的jQuery选择器

2 个答案: