'How to change span text color to blue or red based on span value with Jquery

I have multiple with various numerical values, example:

<span class="getPtsValue">20</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">225</span>
<span class="getPtsValue">100</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">60</span>

I want to color all spans that have a "0" red and all spans that have a number higher than 100, blue.

$(document).ready(function() {
    var getPtsValue = $('.getPtsValue').html(); // = 1
    if (getPtsValue == 0){
        $('.getPtsValue').addClass("text-red");
    }
    if (getPtsValue > '100'){
        $('.getPtsValue').addClass("text-blue");
    }
});

Problem is, my code changes ALL spans that have a class of "getPtsValue" to blue. How do I apply the color change to ONLY those spans with a value of 0 to red and spans with a value of 100 or greater to blue?

jquery


Solution 1:[1]

On DOM Ready get the spans, iterate them and convert text to int with parseInt, if the value is not NaN and meets the condition, add the className appropriate for the color

$(document).ready(function() {
    $('.getPtsValue').each(function() {
        const val = parseInt($(this).text());
        if(!isNaN(val) && val === 0){
           $(this).addClass("text-red");
        } else if(!isNaN(val) && val >= 100) {
           $(this).addClass("text-blue");
        }
    });
});
.text-red {
  color:red;
}
.text-blue {
  color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="getPtsValue">20</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">225</span>
<span class="getPtsValue">100</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">60</span>

Solution 2:[2]

Consider the following.

$(function() {
  $(".getPtsValue").each(function(i, el) {
    var point = parseInt($(el).text().trim());
    if (point == 0) {
      $(el).addClass("red");
    } else if (point > 100) {
      $(el).addClass("blue");
    }
  });
});
.red {
  color: red;
}

.blue {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="getPtsValue">20</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">225</span>
<span class="getPtsValue">100</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">60</span>

This makes use of .each() which will iterate each element.

https://api.jquery.com/each/

Description: Iterate over a jQuery object, executing a function for each matched element.

To ensure that we compare a Number to a Number. When we get .html() or .text(), it will be a String. We can use parseInt() to cast it as an Integer.

We then use .addClass() to add a Class name to the element. This can be any value you want, I just used red and blue.

Solution 3:[3]

$(function() {
  $("span.getPtsValue").each((index, elem) => {
    $(elem)
      .removeClass()
      .addClass(+$(elem).text() === 0 ? 'text-red' : 'text-blue');
  });
});
.text-red {
  color: red;
}

.text-blue {
  color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="getPtsValue">20</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">225</span>
<span class="getPtsValue">100</span>
<span class="getPtsValue">0</span>
<span class="getPtsValue">60</span>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ryan Wilson
Solution 2
Solution 3 fnostro

Related Questions