Changing CSS value based on div value

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?

Probably because value is always less than 4 (< 4) and that why fill it with background-color: #fff??? — Sider Topalov
– Sider Topalov, Commented May 22, 2018 at 14:48
Sider, no the value can be anything, the example that i copied just happened to be 1. Also, #fff is just a placeholder to see if it's out of place since the page background is black. Thanks for commening! — cadillacace
– cadillacace, Commented May 22, 2018 at 14:53

yezzz · Accepted Answer · 2018-05-22 15:25:14Z

3

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');   

});

edited May 22, 2018 at 15:25

answered May 22, 2018 at 15:02

yezzz

3,0381 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cadillacace Over a year ago

yezzz, you are awesome. Thanks!

yezzz Over a year ago

You're welcome. Actually Jonathan's answer was better in that the 2nd parameter passed to the function is the element, and also take note of his if/else logic comments

Jonathan Rys · Accepted Answer · 2018-05-22 15:03:20Z

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>

yezzz · Accepted Answer · 2018-05-22 15:23:34Z

3

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

edited May 22, 2018 at 15:23

yezzz

3,0381 gold badge12 silver badges20 bronze badges

answered May 22, 2018 at 14:40

Erick Lanford Xenes

1,5822 gold badges23 silver badges37 bronze badges

4 Comments

Rory McCrossan Over a year ago

Please remember to tell the user what the problem is and why this helps. We're here to educate people, not just dump code on them.

cadillacace Over a year ago

Thanks Erick, but this would just change the CSS for the .datetime grid cell, not the .a . I have edited my question to include how the html is set up.

cadillacace Over a year ago

Erick, I've added it above. Thanks.

Erick Lanford Xenes Over a year ago

As you can see, your code is fine, but you must define your selectors correctly.

Collectives™ on Stack Overflow

Changing CSS value based on div value

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related