In my project there could be any amount of divs like a thousand, two thousand, a million etc.. I want their background colors to go from green to red. so they all get a different shade of color. the first div will be "real" green the last div will be "real" red.

Here is what I have. As you can see there are divs at the end that get left without a background-color. I would prefer to solve this using rgb.

$(function(){
  var r = 20;
  var g = 200;
  var b = 10;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }
  $(".box").each(function(){
    if(g > 0 && r < 255){
      $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")");
      g-=1;
      r+=1;
    }
  })
})

.box{
  border:2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
}

<script src=".1.1/jquery.min.js"></script>

In my project there could be any amount of divs like a thousand, two thousand, a million etc.. I want their background colors to go from green to red. so they all get a different shade of color. the first div will be "real" green the last div will be "real" red.

Here is what I have. As you can see there are divs at the end that get left without a background-color. I would prefer to solve this using rgb.

$(function(){
  var r = 20;
  var g = 200;
  var b = 10;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }
  $(".box").each(function(){
    if(g > 0 && r < 255){
      $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")");
      g-=1;
      r+=1;
    }
  })
})

.box{
  border:2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

• javascript
• jquery
• html
• css

• Possible duplicate of Generate colors between red and green for a power meter? – Steve Commented May 5, 2016 at 4:02
• @steve I don't understand the top answer. if I do R = (255 * n) / 100 and n == 1 I would get 2.55. I don't think I i could have the decimals as an RGB value. I tried it before. – jack blank Commented May 5, 2016 at 4:11
• @jackblank "yea I don't mind if there is a little duplication. The main point is that at the beginning of the display users see green and further away they see things turning red." , "it's a dynamic amount but It would probably less than 2000" Tried without if condition jsfiddle/0kL4f59z ? – guest271314 Commented May 5, 2016 at 4:35
• but I meant the other guy. Kushner I think his name was. I liked his even though at a 1000 there was 5 divs with the same background. I prefer less duplicates. – jack blank Commented May 5, 2016 at 4:41
• @jackblank Not certain that approach returned expected results. Will undelete. – guest271314 Commented May 5, 2016 at 4:43

4 Answers 4

yea I don't mind if there is a little duplication. The main point is that at the beginning of the display users see green and further away they see things turning red.

Try without if condition

$(function(){
  var r = 20;
  var g = 200;
  var b = 10;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }
  $(".box").each(function(){
      $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")");
      g-= 1;
      r+= 1;
  })
})

.box{
  border:2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

Try this, do not Increment and decrements the value of r and g at the same time, do it alternatively...

$(function(){
  var r = 55
  var g = 200;
  var b = 0;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }
  $(".box").each(function(i){
    if(g > 0 && r < 255){
       $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")");
       if(i%2 == 0)
       {
         g-=1;
       }
       else
       {
         r+=1;
       }
      
    }
  })
})

.box{
  border:2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Someone wrote this earlier but deleted it.

$(function(){
  var r = 20;
  var g = 200;
  var b = 10;
  for(var i = 0; i < 300; i++){
    $("body").append("<div class = 'box'>");
  }

  var noOfBoxes = $(".box").length,
      minRed = 20,
      maxRed = 255,
      maxGreen = 200

  $(".box").each(function(i){
    $(this).css("background", "rgb(" + r + "," + g + "," + b + ")");

    g = parseInt(maxGreen - maxGreen * (i /noOfBoxes), 10)
    r = parseInt(minRed + maxRed * (i/ noOfBoxes), 10)
    console.log(g)
  })
})

.box{
  border:2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>

An approach utilizing css linear-gradient at background of container element holding .box elements, transparent background at .box elements; included outline , border to mask linear-gradient visibility at outside right of container; note this portion of css could still be improved. Set for loop to 2000 iterations. linear-gradient should display expected color transitions gradually from lime to red between 0 to n .box elements.

for (var i = 0, container = document.getElementById("container"); i < 2000; i++) {
  container.insertAdjacentHTML("beforeend", "<div class=box></div>");
};

body {
  overflow-x: hidden;
}
#container {
  background: linear-gradient(to bottom, lime, red);
  outline:25px solid #fff;
  border:25px solid #fff;
  width: calc(100vw - 2.5%); /* adjusted for width of stacksnippets */
  height: auto;
  display: block;
  overflow-x: hidden;
}
.box {
  border: 2px solid black;
  margin: 10px;
  width: 20%;
  height: 100px;
  float: left;
  background: transparent;
  outline: 20px solid #fff;
}

<div id="container">
</div>

jsfiddle https://jsfiddle/0kL4f59z/5/