如何將特定樣式添加到每個第五個div元素？

Question

我想添加一個邊框到每第五個元素。目前的代碼，我只選擇第一個第五元素，不是每一個...我做錯了什麼？

的jQuery：

$(document).ready(function() { 

     $("#categories .cat:nth-child(5)").css({border: '1px solid red', color: '#ff0000'}); 

}); 

HTML：

<div id="categories"> 
    <div class="cat"> cat1 </div> 
    <div class="cat"> cat2 </div> 
    <div class="cat"> cat3 </div> 
    <div class="cat"> cat4 </div> 
    <div class="cat"> cat5 </div> 
    <div class="cat"> cat6 </div> 
    <div class="cat"> cat7 </div> 
    <div class="cat"> cat8 </div> 
    <div class="cat"> cat9 </div> 
    <div class="cat"> cat10 </div> 
</div> 

Answer 1

使用此：

$("#categories .cat:nth-child(5n)") 

通知的5n。

Answer 2

沒有測試它，但你可以嘗試這樣的事：

$(document).ready(function() { 
    var counter = 1; 
    $("#categories").children().each(function(){ 
     if(counter%5==0) 
      $(this).css({border: '1px solid red', color: '#ff0000'}); 
     counter++; 
    }); 
}); 

Answer 3

請記住，CSS3選擇器還允許你這樣做，而不使用JavaScript在所有：

#categories:nth-child(5n) { 
    color: #ff0000; 
    border: 1px solid red; } 

注意：This does not work in IE8 or earlier.

我不會推薦使用它自己的，而是除了JavaScript解決方案之外n（確保跨瀏覽器兼容性）。我只是認爲，在應用Javascript時，讓兼容CSS3的所有瀏覽器都不會遇到任何閃爍現象。