Changing CSS based on the value

Answer 1

var lis=document.querySelectorAll("tr td i");
for(var i in lis){
    if(parseInt(lis[i].innerHTML)<0){
    lis[i].className+=" fa-level-down";
  }
  else{
        lis[i].className+=" fa-level-up";
  }
}

Answer 2

Here .slice will remove the % sign in this code and the rest of the code will compare the value and assign or remove class

var sdlyvar = $('#sdlyvar').text();   

if (sdlyvar.slice(0,-1) < 0){
    $('#sdlyvar').removeClass("fa-level-up");
    $('#sdlyvar').addClass("fa-level-down");
} else {
    $('#sdlyvar').removeClass("fa-level-down");
    $('#sdlyvar').addClass("fa-level-up");
}

Answer 3

Your first problem is that you can't compare a string like "-10.95%" with an integer, because of the final % symbol. You have to use parseFloat on tha value:

var sdlyvar = parseFloat($('#sdlyvar').text());

It will take care of all the non-numeric stuff after the number.

Then, you'd probably want to remove the opposite class when updating:

if (sdlyvar < 0){
    $('#sdlyvar').removeClass("fa-level-up").addClass("fa-level-down");
} else {
    $('#sdlyvar').removeClass("fa-level-down").addClass("fa-level-up");
}

A few random suggestions:

1. Make clear what's wrong in your code when posting on StackOverflow
2. When referring an element more than once with jQuery, consider putting the selection in a variable, like var $sdlyvar = $("sdlyvar");: faster to type and execute.
3. Save us some whitespaces when posting code :/

Answer 4

Use JavaScript parseFloat for parsing percentage (http://www.w3schools.com/jsref/jsref_parsefloat.asp).

var percent = $('#sdlyvar').text();
var result = parseFloat(percent) / 100.0;

if (result < 0){
    $('#sdlyvar').removeClass("fa-level-up");
    $('#sdlyvar').addClass("fa-level-down")
} else {
    $('#sdlyvar').removeClass("fa-level-down");
    $('#sdlyvar').addClass("fa-level-up")
}