Question

i’m writing a new jquery plugin which accepts among others two parameters.
the first is an array of strings, the second an array of color codes (like #CCC)

what i’m doing in my plugin is using the strings in the first array to make a menu that looks something like this:

<ul>
  <li><a class="Link0">string1</a></li>
  <li><a class="Link1">string2</a></li>
</ul>

I simply iterate over the array and create the elements with the correct class.
What I need now is a way to assign the colors in the second array to the classes.

$.each(settings.categoryColors, function(i, val) {
  $('a.Link'+i).css('background-color',val);            
});

The problem is that these classes will also be added dynamically to elements of a datepicker.
So I need a way to set the classes rather than updating the elements with the classes.

In other words I need a way to create the css classes so that all elements that recieve the classes afterwards have the same colors.

I hope this makes sense.

Answer 1

you can generate some css to the head as following :

var style = $('<style> .mystyle { background-color:black; }</style>')
    $('html > head').append(style);

    $.each(settings.categoryColors, function(i, val) {
      $('a.Link'+i).css('mystyle');            
    });