Different Css Background For Each Div In Prevalll()

Following on from my original (now answered) question here: Dont update multiple divs on hover events JS: $(function() { var scaletext = { 1: 'SA', 2: 'A', 3: 'N', 4: 'Da'

Solution 1:

Try creating an array containing colors to be applied , using .each() to set background of each .scale element

$(function() {
 var scaletext = {
  1: 'SA',
  2: 'A',
  3: 'N',
  4: 'Da',
  5: 'SDa'
};
  
var colors = ["red", "darkorange", "orange", "yellow", "green"];
  
$('.scale').hover(function() {
  var $this = $(this);
  $this.prevAll('.scale').addBack().each(function(i) {
    $(this).css("background", colors[i])
  })
  $this.siblings('.scale-text').html(scaletext[$this.data('scale')]);
}, function() {
   var $this = $(this);
   $this.prevAll('.scale').addBack().css('background-color', '');
   $this.siblings('.scale-text').html("No Rating");
 });
});

td > div.scale {
  padding: 5px;
  background-color: lightgrey;
  display: inline-block;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><table><thead><tr><td>Overall</td><td></td><td></td></tr></thead><tbody><tr><td>Question 1</td><tdwidth="300px"><divclass="scale-text">No Rating</div><divdata-scale="1"class="scale scale-1"></div><divdata-scale="2"class="scale scale-2"></div><divdata-scale="3"class="scale scale-3"></div><divdata-scale="4"class="scale scale-4"></div><divdata-scale="5"class="scale scale-5"></div></td><td>Comment</td></tr><tr><td>Question 1</td><tdwidth="300px"><divclass="scale-text">No Rating</div><divdata-scale="1"class="scale scale-1"></div><divdata-scale="2"class="scale scale-2"></div><divdata-scale="3"class="scale scale-3"></div><divdata-scale="4"class="scale scale-4"></div><divdata-scale="5"class="scale scale-5"></div></td><td>Comment</td></tr><tr><td>Question 1</td><tdwidth="300px"><divclass="scale-text">No Rating</div><divdata-scale="1"class="scale scale-1"></div><divdata-scale="2"class="scale scale-2"></div><divdata-scale="3"class="scale scale-3"></div><divdata-scale="4"class="scale scale-4"></div><divdata-scale="5"class="scale scale-5"></div></td><td>Comment</td></tr><tr><td>Question 1</td><tdwidth="300px"><divclass="scale-text">No Rating</div><divdata-scale="1"class="scale scale-1"></div><divdata-scale="2"class="scale scale-2"></div><divdata-scale="3"class="scale scale-3"></div><divdata-scale="4"class="scale scale-4"></div><divdata-scale="5"class="scale scale-5"></div></td><td>Comment</td></tr>