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

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并相应调整条件：

修改

问题编辑完成后，我试图找到一个解决方案并找到了这个，这有点像黑客攻击：

• 使行width: 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>

Answer 2

你可以在没有javascript代码的情况下完成。仅使用CSS :nth-child选择器，例如：

＆＃13;

＆＃13;

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

.row:nth-child(3n+1) {
    background: #3875D9;
}

.row:nth-child(3n+2),
.row:nth-child(3n+3){
    background: #F00;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用3而不是2来检查模数。您有1个蓝色行和2个红色行，因此模数为3.如果您需要不同的模式，则可以相应地更改数字。

因此，if块将如下

if(count%3 == 0){
    $(this).css('background', '#3875D9');
}else{
    $(this).css('background', '#F00');
}

Answer 4

您可以为此编写一个jQuery插件！

只提供类索引和相应类名的模式。这只适用于目前的两个班级。

只需修改模式参数（第一个）即可更改行颜色显示。

// jQuery Plugin
(function($) {
  $.fn.colorRows = function(pattern, classes) {
    this.each(function(index, row) {
      var clsIndex = parseInt(pattern.charAt(index % pattern.length), 10);
      $(this).addClass(classes[clsIndex]);
      $(this).removeClass(classes[1 - clsIndex]);
    });
  };
})(jQuery);

$('#content .row').colorRows('1001100', ['row-red', 'row-blue']);

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

.row-blue { background: #3875D9; }
.row-red  { background: #FF0000; }

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