css - 为每个 x 元素添加类

Question

我有未定义数量的 div 用于在产品列表页面中显示产品，每行有 4 个 div，每个产品一个。我需要的是为每行的第一个 div 分配一个 CSS 类，然后为每行的第二个 div 分配另一个 CSS 类等。我相信你可以用 CSS 或者 jQuery 来做到这一点，但我不知道要搜索什么。

所需的输出如下所示：

<div> //row1
  <div id="1" class="grid1"> Product 1 </div>
  <div id="2" class="grid2"> Product 2 </div>
  <div id="3" class="grid3"> Product 3 </div>
  <div id="4" class="grid4"> Product 4 </div>
</div>
<div> //row 2
  <div id="5" class="grid1"> Product 5 </div>
  <div id="6" class="grid2"> Product 6 </div>
  <div id="7" class="grid3"> Product 7 </div>
  <div id="8" class="grid4"> Product 8 </div>
<div>
...

任何指向正确方向的观点都将受到欢迎。

Answer 1

你可以用纯 CSS 来做到这一点（你甚至不需要它的类）：

div > div:nth-child(1) { ... }
div > div:nth-child(2) { ... }
div > div:nth-child(3) { ... }
div > div:nth-child(4) { ... }

基于 jQuery 的解决方案可能如下所示；请注意，它假定您的行级 div 具有class="row"：

$('div.row > div').each(function() {
    $(this).addClass('grid' + ($(this).index() + 1));
});