victor victor - 11 months ago 34
jQuery Question

change color of div depending numeric value jquery

I have 15 divs with the same class but different id and i want to change the color of the value.

For example, if one or five div's value is under 15 the color of the value will be red, if three or one the value of it is up to 15 but under 45 the color of the value is green and if the value of the div is up to 45 the color will be yellow but all of the colors i want to see at the same time.

My div's are like this:

<div id="listado">
<div id="cuautitlan" class="dfedo">15</div>
<div id="coacalco" class="dfedo">54</div>
<div id="atizapan" class="dfedo">65</div>
<div id="tlalne" class="dfedo">2</div>
<div id="tlalne2" class="dfedo">5</div>
<div id="naucalpan" class="dfedo">90</div>
<div id="neza" class="dfedo">105</div>
<div id="huixqui" class="dfedo">65</div>
<div id="azca" class="dfedo">75</div>
<div id="gustavo" class="dfedo">45</div>
<div id="miguel" class="dfedo">35</div>
<div id="cuauh" class="dfedo">2</div>
<div id="venus" class="dfedo">1</div>
<div id="coaji" class="dfedo">58</div>
<div id="alvaro" class="dfedo">5</div>
<div id="benito" class="dfedo">95</div>
<div id="izta" class="dfedo">43</div>
<div id="magda" class="dfedo">35</div>
<div id="coyoacan" class="dfedo">33</div>
<div id="iztapa" class="dfedo">65</div>
<div id="tlalpan" class="dfedo">89</div>
<div id="xochi" class="dfedo">99</div>
<div id="tlahuac" class="dfedo">9</div>
<div id="milpa" class="dfedo">0</div>

My jquery is like this

$(this).value < 15 ? $(this).css('color','red');

My fiddle


Please check the demo :

$("div.dfedo").each(function() {
  $(this).html() < 15 ? $(this).css('color', 'red') : null;

  ($(this).html() >= 15 && $(this).html() < 45) ? $(this).css('color', 'green'): null;

  $(this).html() >= 45 ? $(this).css('color', 'yellow') : null;