admin管理员组

文章数量:1422560

I'm trying to change some divs background colors. Now I know how to change even and odds elements background colors. How to change the background in a JavaScript loop using the next pattern: one row blue, two rows red, one row blue, two rows red, and so on?

My code:

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=".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>

I'm trying to change some divs background colors. Now I know how to change even and odds elements background colors. How to change the background in a JavaScript loop using the next pattern: one row blue, two rows red, one row blue, two rows red, and so on?

My code:

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

UPDATE:

After the answers, I saw that I didn't even knew what I was trying to achieve, so I'm going to post and image here. The question is almost the same. I will let the image explain what I am trying to do:

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 23, 2016 at 14:36 Ionut Necula asked Sep 23, 2016 at 14:13 Ionut NeculaIonut Necula 11.5k44 gold badges4949 silver badges7272 bronze badges 2

• 2 You can achieve the same effect with just css by targeting all elements to be red and then target the third one to be blue: Ex: .row{background: red;} .row:nth-child(3n){background: blue}; . Css is loading much faster than JS so if you can do it you should optimize the page with everything you can. – Dinca Adrian Commented Sep 23, 2016 at 14:21
• The question is good and it is useful. Don't change this question and post new question. – Mohammad Commented Sep 23, 2016 at 14:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

Simply use % 3 instead of % 2 and adjust the condition accordingly:

Edit

After the question was edited, I tried to find a solution and found this, which is a bit of a hack:

• make rows width: 50%; float: left to fit two of them in one row
• modify a little the logic of applying colors

$('#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./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>

You can do it without javascript code. Only use CSS :nth-child selector like example:

.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;
}

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

You can check the modulus by 3 instead of 2. You have 1 blue row and 2 red rows so modulus by 3. If you need different pattern then you can change the number accordingly.

So, the if block will be as follows

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

You can write a jQuery plugin for that!

Just supply a pattern for the class indices and the corresponding class names. This will only work for two classes at the moment.

Just modify the pattern parameter (first) to change the row color display.

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

本文标签： javascriptHow to change row colors in a loopStack Overflow