매 3 회마다 다른 CSS 클래스를 루프에 추가하는 방법

Question

기본적으로 내가해야 할 일은 모든 게시물을 반복하고 "cb-no-1"과 같은 기사 클래스에 CSS를 추가하는 것입니다. 두 번째 "cb-no- 2 "와 세 번째"cb-no-3 "을 입력하고 게시물이 없을 때까지 다시 채 웁니다.

@foreach (var post in Model.Posts) 
    { 
     //First iteration 
     <article class= "cb-no-1">    
     </article> 

     //Second iteration 
     <article class= "cb-no-2">    
     </article> 

     //Third iteration 
     <article class= "cb-no-3">    
     </article> 

     //Fourth iteration 
     <article class= "cb-no-1">    
     </article> 

     //and so on. 
    } 

어떻게해야 하는가? 미리 감사드립니다.

Answer 1

사용하십시오 변수를 만들고 루프에서이 값을 증가시키고이 변수 이름을 사용하여 클래스 이름을 만듭니다. 변수가 3 (또는 한도)에 도달하면 초기 값으로 재설정하십시오.

@{ 
    var counter = 0; 
} 

@foreach (var post in Model.Posts) 
{ 
    if (counter >= 3) 
    { 
    counter = 0; 
    } 
    <article class= "cb-no-@(++counter)">@post.Title</article> 
} 

Answer 2

같이 변수를 사용하여 각각의 루프 1 및 증가에서 inited는 그것의 4 reachs 때, 1

으로 재설정 클래스 이름을 위해 사용되는 루프 내부 i 같은

Answer 3

첫 번째 응답자 인 수주는 올바른 생각을 가지고 있지만 답변에 필요한 두 가지 수정 사항이 있습니다.

먼저 코드는 0에서 2 사이의 변수를 제공합니다. 1에서 3을 요구했습니다. 그래서 초기화는 "var counter = 1"이어야하고 "if"테스트는 3보다 크거나 3보다 크지 않아야합니다. 또는 3을 4로 변경할 수 있습니다 : if (counter > = 4).

코드 스 니펫의 두 번째 항목은 카운터를 증가시키는 항목입니다. 나는 당신이 작성하는 방언 또는 언어 모르겠지만 뭔가 같은 :

카운터 + = 1 개 또는 카운터 = 카운터 +

수정 1, 그 코드가 보일 것 같은 :

var counter = 1; 
    @foreach (var post in Model.Posts) 
    { 
     if (counter >= 4) 
     { 
     counter = 0; 
     } 
     <article class= "cb-no-@(++counter)">@post.Title</article> 
     counter += 1 
    } 

다시 말해, 어떤 언어를 쓰는지 모르겠으므로 신중하게 신택스를 확인하십시오.