Assign different colors to individual array elements

Posted by rk. on Stack Overflow See other posts from Stack Overflow or by rk.
Published on 2012-11-24T23:02:06Z Indexed on 2012/11/24 23:03 UTC
Read the original article Hit count: 239

Filed under:
|

Say I have the array, arr1. I want to print this array (i.e. just display the numbers) but, I want to color the numbers based on their values. If arr1[i]<15, green, if arr1[i]>20, red, else orange. Something to this effect.

var arr1 = [ 5,10,13,19,21,25,22,18,15,13,11,12,15,20,18,17,16,18,23,25,25,22,18,15,13,11,12,15,20,18];

Here is what I tried doing:

        for(var i=0; i<arr1.length;i++){
            if(arr1[i]<15){
                var temp = $(this).css("color","green");
                $this.text(temp);
            } else if(arr1[i]>20){
                var temp = $(this).css("color","red");
                $this.text(temp);
            } else {
                var temp = $(this).css("color","orange");
                $this.text(temp);
            }

        }

I tried changing the css property of individual elements and them adding them to the div, but it did not work for me.

Can someone suggest how should I go about doing this?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery