CODEWITHSUNDEEP
javascriptjqueryhtmlcss
victor
victor

Reputation: 537

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

My jquery is like this

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

My fiddle

Upvotes: 0

Views: 2657

Answers (3)

rsp
rsp

Reputation: 111506

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.

Upvotes: 3

Yosvel Quintero
Yosvel Quintero

Reputation: 19090

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>

Upvotes: 1

Joey Etamity
Joey Etamity

Reputation: 866

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

Upvotes: 1

Related Questions