jQuery - 3의 증가분으로 클래스 추가하기

Question

클래스를 추가하는 jQuery의 기본 라인과 데이터베이스 출력을 위해 증가하는 숫자가 있습니다. 아래의 출력 :

<div class="panelCon"> 
<div class="panel01">Content</div> 
<div class="panel02">Content</div> 
<div class="panel03">Content</div> 
<div class="panel04">Content</div> 
<div class="panel05">Content</div> 
<div class="panel06">Content</div> 
</div> 

내가 뭘 고민하고있어 출력 수학/코드 div의가 있지만 1, 예를 들어 3의주기

<div class="panelCon">  
<div class="panel01">Content</div> 
<div class="panel02">Content</div> 
<div class="panel03">Content</div> 
<div class="panel01">Content</div> 
<div class="panel02">Content</div> 
<div class="panel03">Content</div> 
</div> 

아마도 기본 사항이지만 도움이되는 참고 자료는 쉽게 찾을 수 없습니다.

감사

Answer 1

$(".panelCon > div").each(function(i){ 
    $(this).addClass('panel0'+ ((i%3)+1)); 
}); 

LIVE DEMO 또는 같은 :

$('.panelCon > div').addClass(function(i) { 
    return "panel0" + ((i%3)+1) ; 
}); 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
http://api.jquery.com/each/ (i에 repr 배열 (컬렉션)에서 요소의 인덱스을 esents)
http://api.jquery.com/addclass/

Answer 2

당신은 addClass에 콜백과 나머지 연산자를 사용할 수 있습니다.

$('.panelCon > div').addClass(function(index) { 
    return 'panel0' + ((index % 3) + 1); 
}); 

Answer 3

이 콜백 서명 매우 간단합니다 addClass에 : 그러나

$('div.panelCon div').addClass(function(idx, oldClass) { 
    return 'panel' + ((idx % 3) + 1); 
}); 

당신은 스타일링의 목적에 클래스를 추가하는 경우, 당신은 수도 nth-child CSS 셀렉터 더 나을 :

div.panelCon div:nth-child(3n+1) { 
    /* styles for the first column */ 
} 
div.panelCon div:nth-child(3n+2) { 
    /* styles for the second column */ 
} 
div.panelCon div:nth-child(3n) { 
    /* styles for the third column */ 
} 

Answer 4

var i = 1; 
      $(".panelCon").children("div").each(function(){ 
       $(this).addClass("panel0" + i); 
       if(i == 3){ 
        i = 0; 
       } 
       i++; 
      });