根据数值jquery更改div的颜色

Question

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>
</div>

My jquery is like this

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

My fiddle

Answer 1

Make this jQuery plugin:

$.fn.colorize = function () {
   return this.each(function() {
      var $this = $(this), number = $this.text();
      $this.css({color: number < 15 ? "red"
                      : number < 45 ? "green"
                      : "yellow"});
   });
};

And just run:

$("div.dfedo").colorize();

See DEMO .

Making a jQuery plugin for things like these is a good habit. That way you can reuse your code easily and do interesting things like this:

$("div.dfedo").hide().colorize().show("slow");

By making a simple plugin you basically make a new jQuery command that does what you want.

Answer 2

Your issue was on the Conditional (ternary) Operator :

 $('div.dfedo').each(function() { var $elem = $(this), val = $elem.html(), color = (val < 15) ? 'red' : (val >= 15 && val < 45) ? 'green' : 'yellow'; $elem.css('color', color); }); 

 .dfedo { background-color: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> </div> 

Answer 3

Please check the demo : https://jsfiddle.net/pj4c40qq/1/

$("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;
});