css - 如何每3次在循环中动态添加不同的css类

Question

基本上我需要做的是循环所有的帖子并将CSS添加到文章类如“cb-no-1”和第二个“cb-no-2”和第三个“cb-no-3”并再次repait，直到没有帖子为止。

@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>
}