javascript - 如何在循环中更改行颜色？

Question

我正在尝试更改一些 div 背景颜色。现在我知道如何更改偶数和奇数元素的背景颜色。如何使用下一个模式更改 JavaScript 循环中的背景:一行蓝色、两行红色、一行蓝色、两行红色等等？

我的代码:

var count = 0;
$('#content .row').each(function () {  
    if(count%2 == 0){
        $(this).css('background', '#F00');       
    }else{
        $(this).css('background', '#3875D9');              
    }
    count++;
});

.row{
  display: inline-block;
  width: 100%;
  color: #fff;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content'>
  <div class='row'>row</div>
  <div class='row'>row</div>
  <div class='row'>row</div>
  <div class='row'>row</div>
  <div class='row'>row</div>
  <div class='row'>row</div>
  <div class='row'>row</div>
</div>

更新:

回答之后，我发现我什至不知道我要达到什么目的，所以我要在这里发帖和拍照。这个问题几乎是一样的。我会让图片解释我要做什么:

Answer 1

只需使用 % 3 而不是 % 2 并相应地调整条件:

编辑

问题被编辑后，我试图寻找解决方案并找到了这个，这有点hack:

• 使行 宽度:50%； float: left 将其中两个放在一行中
• 稍微修改一下应用颜色的逻辑

$('#content .row').each(function (index) {  
    if(index % 4 == 0 || index % 4 == 3){
        $(this).css('background', '#3875D9');       
    }else{
        $(this).css('background', '#F00');              
    }
});

.row{
  display: inline-block;
  width: 50%;
float:left;
  color: #fff;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content'>
  <div class='row'>row</div>
  <div class='row'>row</div>
  <div class='row'>row</div>
  <div class='row'>row</div>
  <div class='row'>row</div>
  <div class='row'>row</div>
  <div class='row'>row</div>
</div>