3回毎に異なるCSSクラスをループに追加するには

Question

基本的には、すべての投稿をループして「cb-no-1」のような記事クラスにCSSを追加し、「cb-no- 2 "と3番目の" 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

最初の応答者であるShyjuは適切なアイデアを持っていますが、答えには2つの変更が必要です。

まず、彼のコードは0から2までの変数を与えます。あなたは1から3を求めました。初期化は "var counter = 1"でなければならず、 "if"テストは3より大きくなく3以上にする必要があります。あるいは、3を4に変更することもできます：if（counter > = 4）。

このコードスニペットの2番目の項目は、カウンタをインクリメントするものです。私はあなたが書いている方言や言語はよく分からないけど、何かのように：

カウンター+ = 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 
    } 

また、私はあなたが書いている言語が分からないので、構文を慎重にチェックしてください。