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

I have multiple with various numerical values, example:

<span >20</span>
<span >0</span>
<span >225</span>
<span >100</span>
<span >0</span>
<span >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?

CodePudding user response：

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 >20</span>
<span >0</span>
<span >225</span>
<span >100</span>
<span >0</span>
<span >60</span>

CodePudding user response：

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 >20</span>
<span >0</span>
<span >225</span>
<span >100</span>
<span >0</span>
<span >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.

CodePudding user response：

$(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 >20</span>
<span >0</span>
<span >225</span>
<span >100</span>
<span >0</span>
<span >60</span>