for each link change color based on array

I have an array containing the hrefs of colours and I want to go though each link in my nav and apply a different colour based on the order of the array.

I think this is possible but i'm missing something.

Here is my code

    var colourValue = [ "fff", "000", "FF6600", "FF00FF", "FFFF00" ];
//this is how console displays the array, I have no control over the values.
        var values = [];
        values.push(colourValue);
        console.log(values);

         $.each(values, function(index, value) { 
             var colorStyle = "#" + value +"";
             $(".nav li:first-child").find("a").css("color",colorStyle);
            });

Don't really know what I'm missing, Any tips? Thanks very much (colourValue is dynaimcally popu开发者_C百科lated but for this eg I wrote it out).

The problems

var colourValue [ "#fff", "#000", "#FF6600", "#FF00FF", "#FFFF00" ]
var values = [];
values.push(colourValue);

That's a very odd bit of code. You define an array (actually, you don't -- it's missing =) and give it some values, then create another array and append each of the values of the first array to the second. You don't need two arrays here, you can just loop through the origial array.

var colorStyle = "#" + value +"";

That makes ##fff, which is obviously not what you want. You can just access the value with value.

$(".nav li:first-child").find("a").css("color",colorStyle);

This is the big problem. It loops through all the members of values, and on each iteration sets every link to have the colour of the current member of the array. Your selection, however, will only ever have the links in the first li element, which is clearly not what you want. You need .nav li a.

The solution

jQuery has lots of nice ways of working with selections. You probably want something like this:

var colourValue = [ "#fff", "#000", "#FF6600", "#FF00FF", "#FFFF00" ]
$('.nav li a').css('color', function(idx) {
    return colourValue[idx % colourValue.length];
});

This runs a function for each element in the selection. The function receives the element's position (0-indexed) in the selection as its first argument (idx). Using the modulus operator (%) in this way says "return 0 for the first item, 1 for the second ... 4 for the fifth, 0 for the sixth, etc". You then use this value to find the correct colour from the array.

The return value of the function is set as the value of the CSS property.

A quick note to this: if you have the same number of links to be coloured as you do colours, the modulus operation is unnecessary. You could just use return colourValue[idx];.

Try this:

var yourArray = ["#fff", "#000", "#FF6600", "#FF00FF", "#FFFF00"];
$('.nav a').each(function(i) {
    $(this).css("color", yourArray[i]);
});

You can really cut down the code this way, you don't need the $.each. Also, doing a selector the way you were is not only going to return the wrong results, but will also give you terrible performance. You were traversing the dom every time you walked through an array item. Its better to get your links first, then apply the array items to them, not the other way around.

For one you are missing the "=" on var colourValue = [...

The other problem is that you are assigning the "#" to the color hex twice.

This should work:

var colourValues = ["#fff", "#000", "#FF6600", "#FF00FF", "#FFFF00"];

$.each(colourValues, function(index, colorStyle){
   $(".nav li:first-child").find("a").css("color", colorStyle);
});

var colourValues = ["#fff", "#000", "#FF6600", "#FF00FF", "#FFFF00"];

$.each(colourValues, function(index, value){
   $(".nav li:first-child a").eq(index).css("color", value);
});