jquery update css property with array element

Question

my current css looks like this for class "firstTri"

.firstTri{
    width: 0; 
    height: 0; 
    border-top: 160px solid transparent;
    border-bottom: 160px solid transparent;

    border-left: 160px solid gray;
}

I want to change the color of this triangle to yellow, so I have:

$('.firstTri').css("border-right","160px solid yellow");

which works but what if I want to update the color with the values in this array:

samples = [
        { 
        values : ["blue", "red", "green", "blue", "yellow"],
        },
        { 
        values : ["...etc"],
        }

];

I was thinking something like this:

 $('.firstTri').css("border-right","160px solid samples[i].values[j]");

i and j increment, i increments after j ends

For example, the second index is red, so that would be

samples[0].values[1]

Sting concatenation -> $('.firstTri').css("border-right","160px solid " + samples[i].values[j]); — adeneo
– adeneo, Commented Apr 21, 2015 at 18:17

Danny van Holten · Accepted Answer · 2015-04-21 18:55:16Z

2

You are putting a string into the CSS value. It cannot contain variables. If you would write something like this

$('.firstTri').css("border-right","160px solid " + samples[i].values[j]);

It should work.

edited Apr 21, 2015 at 18:55

answered Apr 21, 2015 at 18:19

Danny van Holten

9325 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery update css property with array element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related