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?

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?

• javascript
• jquery

Share Improve this question Follow asked Nov 24, 2012 at 23:02 rk.rk. 34911 gold badge33 silver badges2020 bronze badges 3

• 1 Please show the HTML for the numbers array. – Sidharth Mudgal Commented Nov 24, 2012 at 23:05
• What does $(this) refer to in your code? – David Thomas Commented Nov 24, 2012 at 23:13
• $(this) refers to the div inside which I want to display the numbers. – rk. Commented Nov 25, 2012 at 0:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I'd suggest:

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],
    target = document.getElementById('test');

for (var i = 0; i < arr1.length; i++) {
    var elem = document.createElement('span'),
        text = document.createTextNode(arr1[i]);
    elem.appendChild(text);
    if (arr1[i] < 15) {
        elem.style.color = 'green'
    } else if (arr1[i] > 20) {
        elem.style.color = 'red'
    } else {
        elem.style.color = 'orange'
    }
    target.appendChild(elem);
}​

JS Fiddle demo

I'm using plain JavaScript because I couldn't see what $(this) was referring to, and it seemed easier to simply use a known variable to demonstrate.

And the reason I'm using a span to contain the text that's being assessed is simply because a textNode can't be styled directly, only an element can have a style attribute.

Wrap a <span> around the text and color that instead..

for(var i=0; i<arr1.length;i++){
    var value = arr1[i],
        element = $('<span/>',{'text':value}),
        color = '';

    if(value<15){
        color = 'green';
    } else if(value>20){
        color = 'red';
    } else {
        color = 'orange';
    }

    $this.append( element.css({'color':color}) );
}

Demo at http://jsfiddle/gaby/6w7xL/

You can't set css with jQuery directly on text nodes. It has to be on an element containing the text.