根据div值更改CSS值

Question

I am trying to change the background of a cell in a css grid based on a value of a div that is pulled from a php database query.I'm using jquery to achieve the same function with another div, but the only difference is the value that is being compared is the same div in the css. Here is the div structure for the html. box datetime is a child of box a .

<div class='box a'>
<div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.com' target='_blank'>Proper Name</a></div>
<div class='box mm'>75.49</div>
<div class='sog'>10.2</div>
<div class='box datetime'>1</div>

Here is the function i'm using.

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);
  if (value < 4)
     $('.a').css('background-color', '#fff');
     else if (value >= 4 && value <= 15)
     $('.a').css('background-color', 'orange');
     else
     $('.a').css('background-color', 'purple');   

});

• .datetime is a whole number that represents the number of minutes bewteen 2 times.
• .a is the css grid cell that i want to change the css properties of.

Right now, it will only turn all of the .a background color to #fff. It will not evaluate correctly. What am I doing wrong?

Answer 1

Try this:

  var value = Number($('.datetime').text());
  //console.log(value);
  if (value < 4)
     $(".a", '.datetime').css('background-color', '#fff');
  else if (value >= 4 && value <= 15)
     $(".a", '.datetime').css('background-color', 'orange');
  else
     $(".a", '.datetime').css('background-color', 'purple');   

..if you have a single group you dont need the each

Answer 2

You're setting styling on all .a elements. The last value in the loop determines the value for all .a elements. To set them individually for each .datetime , get the parent ( .a ) element of each .datetime :

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);

  var $elem = $(this).parent();

  if (value < 4)
     $elem.css('background-color', '#fff');
  else if (value >= 4 && value <= 15)
     $elem.css('background-color', 'orange');
  else
     $elem.css('background-color', 'purple');   

});

Answer 3

You are passing value in from .each but overwriting the value on the next line. Also you don't need to check that the value is <= 4 since you've already ruled out that the value isn't < 4 . But I think the reason your code isn't working is because you are changing all .a to the color dictated by the last element processed:

 $('.datetime').each(function(index, value) { var textValue = parseInt($(value).text()); if (textValue < 4) { $(value).parent(".a").css('background-color', '#fff'); } else if (textValue <= 15) { $(value).parent(".a").css('background-color', 'orange'); } else { $(value).parent(".a").css('background-color', 'purple'); } }); 

 body { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='box a'> <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.com' target='_blank'>Proper Name</a></div> <div class='box mm'>75.49</div> <div class='sog'>10.2</div> <div class='box datetime'>3</div> </div> <div class='box a'> <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.com' target='_blank'>Proper Name</a></div> <div class='box mm'>75.49</div> <div class='sog'>10.2</div> <div class='box datetime'>12</div> </div> <div class='box a'> <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.com' target='_blank'>Proper Name</a></div> <div class='box mm'>75.49</div> <div class='sog'>10.2</div> <div class='box datetime'>18</div> </div>