Много Div нужно перейти от зеленого до белого и белого до красного

Question

У меня есть страница с большим количеством элементов div, созданных базой данных, каждый элемент div имеет свой цвет, от зеленого до красного (я увеличиваю красный и уменьшаю зеленый), но между ними появляется уродливый коричневый ...так что я думаю, что лучше для глаз перейти от зеленого к белому, а от белого к зеленому, но я не могу найти решение: /

var R=0;
var V=255;
var B=0;
var divi=255/($('.ordreprio').length-1);
$('.ordreprio').each(function(){

  $(this).css("background-color","rgb("+R+","+V+","+B+")");
       
  R=R+divi;
  V=V-divi;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="recherchemot">
 
    <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 8
            <form method="post" action="./coursrecherche.php" name="formcours8"><input type="hidden" name="valuecours" value="8"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 4
            <form method="post" action="./coursrecherche.php" name="formcours4"><input type="hidden" name="valuecours" value="4"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 5
            <form method="post" action="./coursrecherche.php" name="formcours5"><input type="hidden" name="valuecours" value="5"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 6
            <form method="post" action="./coursrecherche.php" name="formcours6"><input type="hidden" name="valuecours" value="6"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 1
            <form method="post" action="./coursrecherche.php" name="formcours1"><input type="hidden" name="valuecours" value="1"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 2
            <form method="post" action="./coursrecherche.php" name="formcours2"><input type="hidden" name="valuecours" value="2"></form>    </div>
        <br><br>
            <div class="ordreprio">
        mon texte par a été trouvé 1 fois sur le cours 3
            <form method="post" action="./coursrecherche.php" name="formcours3"><input type="hidden" name="valuecours" value="3"></form>    </div>
        <br><br>
          
</div>

Answer 1

Обычно я использую HSL единиц, когда мне нужно генерировать такие градиенты.Красный имеет оттенок 0 (hsl(0, 100%, 50%)), а зеленый - 120 (hsl(120, 100%, 50%)), поэтому, изменяя оттенок от 0 до 120, вы можете изменить цвет с красного на зеленый.(Вместо белого между ними вы получаете желтый.)

Вот ваш пример, обновленный этим:

var red = 0;
var green = 120;
var increment = (red + green) / ($('.ordreprio').length - 1);

var hue = red;
$('.ordreprio').each(function() {

  $(this).css("background-color", "hsl(" + hue + ", 100%, 50%)");

  hue += increment;
});

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

  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 8
    <form method="post" action="./coursrecherche.php" name="formcours8"><input type="hidden" name="valuecours" value="8"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 4
    <form method="post" action="./coursrecherche.php" name="formcours4"><input type="hidden" name="valuecours" value="4"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 5
    <form method="post" action="./coursrecherche.php" name="formcours5"><input type="hidden" name="valuecours" value="5"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 6
    <form method="post" action="./coursrecherche.php" name="formcours6"><input type="hidden" name="valuecours" value="6"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 1
    <form method="post" action="./coursrecherche.php" name="formcours1"><input type="hidden" name="valuecours" value="1"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 2
    <form method="post" action="./coursrecherche.php" name="formcours2"><input type="hidden" name="valuecours" value="2"></form>
  </div>
  <br><br>
  <div class="ordreprio">
    mon texte par a été trouvé 1 fois sur le cours 3
    <form method="post" action="./coursrecherche.php" name="formcours3"><input type="hidden" name="valuecours" value="3"></form>
  </div>
  <br><br>

</div>