Color parent parent if value

by akmiecik

HTML

<div class="the_weeks_grid"><div class="week_col">41</div>
 <div class="start_day">10/09</div>
 <div class="total_col">115.0</div> 
 <div class="sun_miles miles"><span class="at">@
		<span class="average"></span></span> 
 		<span class="in_out hide"></span>
 </div>
 <div class="mon_miles miles">17.0<span class="at">@
		<span class="average">18.9</span></span> 
 		<span class="in_out hide">0</span>
 </div>
 <div class="tue_miles miles">22.0<span class="at">@
		<span class="average">18.5</span></span> 
 		<span class="in_out hide">0</span>
 </div>
 <div class="wed_miles miles">21.0<span class="at">@
		<span class="average">21.8</span></span> 
 		<span class="in_out hide">1</span>
 </div>
 <div class="thur_miles miles">18.0<span class="at">@
		<span class="average">18.0</span></span> 
 		<span class="in_out hide">0</span>
 </div>
 <div class="fri_miles miles">20.0<span class="at">@
		<span class="average">22.5</span></span> 
 		<span class="in_out hide">1</span>
 </div>
 <div class="sat_miles miles">17.0<span class="at">@
		<span class="average">22.9</span></span> 
 		<span class="in_out hide">1</span>
 </div><div class="week_col">40</div>
 <div class="start_day">10/02</div>
 <div class="total_col">119.5</div> 
 <div class="sun_miles miles">19.5<span class="at">@
		<span class="average">17.9</span></span> 
 		<span class="in_out hide">0</span>
 </div>
 <div class="mon_miles miles"><span class="at">@
		<span class="average"></span></span> 
 		<span class="in_out hide"></span>
 </div>
 <div class="tue_miles miles">20.5<span class="at">@
		<span class="average">18.2</span></span> 
 		<span class="in_out hide">0</span>
 </div>
 <div class="wed_miles miles">22.0<span class="at">@
		<span class="average">18.7</span></span> 
 		<span class="in_out hide">0</span>
 </div>
 <div class="thur_miles miles">21.5<span class="at">@
		<span class="average">18.1</span></span> 
 		<span class="in_out hide">0</span>
 </div>
 <div class="fri_miles miles">18.0<span class="at">@
		<span...

CSS

.the_weeks_grid {
display: grid;
grid-template-columns: 30px 65px 50px repeat(7, 60px);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.at {font-size: 12px;}
.sun_miles, .mon_miles, .tue_miles, .wed_miles, .thur_miles, .fri_miles, .sat_miles, .sun_ave, .mon_ave, .tue_ave, .wed_ave, .thur_ave, .fri_ave, .sat_ave {
  width: unset !important;
	border: 1px solid black;
	font-size: 10px !important;
	text-align: center;
	background: #ffffff;
}
.average {font-size: 10px !important;}
.hide {display: none;}
.slower {background-color: #00D200; color: #ffffff;}
.slow {background-color: #00A200; color: #ffffff;}
.medium {background-color: #007200; color: #ffffff;}
.fast {background-color: #005200; color: #ffffff;}
.faster {background-color: #003200; color: #ffffff;}
.fastest {background-color: #720000; color: #ffffff;}
.rollers_slower {background-color: #0000D2; color: #ffffff;}
.rollers_slow {background-color:  #0000A2; color: #ffffff;}
.rollers_medium {background-color:  #000072; color: #ffffff;}
.rollers_fast{background-color:  #000052; color: #ffffff;}
.rollers_faster{background-color:  #000032; color: #ffffff;}
.rollers_fastest {background-color:  #CC0000; color: #ffffff;}

JavaScript

$(document).ready(function () {
$('.at span:empty').parent().hide()
    $(".average").each(function() {
        var ave = $(this);
        var value = parseFloat(ave.text());
             
        if (value <= 16.9) {
                ave.parent().parent().addClass("slower");    
        }        
         if ((value >= 17.0) && (value < 17.5)) {
                ave.parent().parent().addClass("slow");    
        }        
         if ((value >= 17.5) && (value < 18.0)) {
                ave.parent().parent().addClass("medium");    
        }	
        if ((value >= 18.0) && (value < 18.5)) {
                ave.parent().parent().addClass("fast");    
        }
        if ((value >= 18.5) && (value < 19.0)) {
                ave.parent().parent().addClass("faster");    
        }
$(".in_out").each(function() {
        var inout = $(this);
        var out = parseFloat(inout.text());
		if(out == 0)     
      if (value >= 19.0) {
        ave.parent().parent().addClass("fastest");    
      }
    if(out == 1)     
      if ((value >= 20.0) && (value < 21.0)) {
        ave.parent().parent().addClass("rollers_slowest");    
      }
      if ((value >= 21.0) && (value < 22.0)) {
        ave.parent().parent().addClass("rollers_slow");    
      }
      if ((value >= 22.0) && (value < 22.5)) {
        ave.parent().parent().addClass("rollers_medium");    
      }  
      if ((value >= 22.5) && (value < 23.0)) {
        ave.parent().parent().addClass("rollers_fast");    
      }
      if ((value >= 23.0) && (value < 23.2)) {
        ave.parent().parent().addClass("rollers_faster");    
      } 
      if ((value >= 23.5) && (value < 24.0)) {
        ave.parent().parent().addClass("rollers_fastest");    
      } 
    });

   
    });   

});