爲每個x元素添加類

Question

我有一個未定義數量的div用於在產品列表頁面中顯示產品，每行都有4個div，每個產品一個div。 我需要的是爲每行的第一個div分配一個CSS類，然後將另一個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)); 
});