다섯 번째 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 셀렉터는이 작업을 수행 할 수 있음을 명심를 :

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

참고 : This does not work in IE8 or earlier.

나는 그것을 자신의 것으로 사용하는 것이 아니라 자바 스크립트 solutio n (브라우저 간 호환성 보장). CSS3와 호환되는 브라우저를 사용하면 Javascript가 적용될 때 어떤 종류의 깜박임도 경험하지 않는다고 생각할 수 있습니다.