Question

How can I change colors of elements using variables?

Let’s say we have four strings(colors). I need to give every class element different one, 1,2,3,4,1,2,3… and so on:

function pressLineColors() {

    var a = "#eee",
    b = "#123",
    c = "#fff",
    d = "#ae23e5";

     $('.pressLine').each(function (i) {
         //go througt each of this, and give them colors, so when new elements
        // appear, give them next color. 
     });
}

First element sholud have color a, second b, third c, fourth d, and fifth a, …

Answer 1

function pressLineColors() {

    //setup array of colors and a variable to store the current index
    var colors = ["#eee", "#123", "#fff", "#ae23e5"],
        curr   = 0;

    //loop through each of the selected elements
    $.each($('.pressLine'), function (index, element) {

        //change the color of this element
        $(this).css('color', colors[curr]);

        //increment the current index
        curr++;

        //if the next index is greater than then number of colors then reset to zero
        if (curr == colors.length) {
            curr = 0;
        }
    });
}

Here is a demo: http://jsfiddle.net/SngJK/

Update

You can also use the suggestion in the comments to this answer to shorten the code a bit:

function pressLineColors() {
    var colors = ["#eee", "#123", "#fff", "#ae23e5"],
        len    = colors.length;
    $.each($('.pressLine'), function (index, element) {
        $(this).css('color', colors[index % len]);
    });
}

Here is a demo: http://jsfiddle.net/SngJK/2/

Update

You can also use .css('color', function (){}) to iterate through each of the elements, returning the color you want to make the element:

$('.pressLine').css('color', function (index, style) {
    return colors[index % len];
});

Here is a demo: http://jsfiddle.net/SngJK/4/