Jquery Changing CSS class of object based on numeric content

Question

Going to be outputting percentages dynamically 0-100%

Want to add CSS class based on percentage. Red for 0% and Blue for 100% progressively.

Markup would be

Answer 1

I see nothing wrong with using :contains() (see http://jsfiddle.net/b3tUf/), but if you want to change your code, you could always just use conditional statements.

if( $("span").text() == "0%" ) {
    $("span").css("color", "#0000ff");
} elseif ( $("span").text() == "100%" ) {
    ...
}

or for classes:

if( $("span").text() == "0%" ) {
    $("span").removeClass().addClass("red");
} elseif ( $("span").text() == "100%" ) {
    $("span").removeClass().addClass("blue");
}