Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div>
  
  <!-- ie. if value is less than 20 == red 
    if value is between 20 - 60 == orange , 
    if value is greater than 60 to 100 == green. -->
    
  <p data-color="19">Lorem 19</p>
  <p data-color="25">Lorem 25</p>
  <p data-color="55">Lorem 55</p>
  <p data-color="60">Lorem 60</p>
  <p data-color="61">Lorem 61</p>
  <p data-color="100">Lorem 100</p>
  
</div>
</body>
</html>
 
.red {color:red}
.orange {color:orange}
.green {color:green}
 
$(document).ready(function(){
  
  var mc = {
    '0-19'     : 'red',
    '20-59'    : 'orange',
    '60-100'   : 'green'
  };
  
function between(x, min, max) {
  return x >= min && x <= max;
}
  
  
  var dc;
  var first; 
  var second;
  var th;
  
  $('p').each(function(index){
    
    th = $(this);
    
    dc = parseInt($(this).attr('data-color'),10);
    
    
      $.each(mc, function(name, value){
        
        
        first = parseInt(name.split('-')[0],10);
        second = parseInt(name.split('-')[1],10);
        
        console.log(between(dc, first, second));
        
        if( between(dc, first, second) ){
          th.addClass(value);
        }
    
    
      });
    
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
giacomopaitapro
0viewers