如何将特定样式添加到每个第五个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的所有浏览器都不会遇到任何闪烁现象。