css - 为每个 x 元素添加类

Question

我有一个未定义数量的 div 用于在产品列表页面中显示产品，每行有 4 个 div，每个产品一个。我需要的是将一个 CSS 类分配给每行的第一个 div，然后将另一个 CSS 类分配给每行的第二个 div，等等。我相信您可以使用 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));
});