Question

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

将类添加到每个x元素

1 个答案: