How do I call a created function for multiple elements at once?

Question

I created a brief function just to illustrate my point.

Suppose I have created an myFunction() function that does the following service:

function myFunction(element,property,color){
    $(element).css(property,color);
};

Then for each element that I want to apply this function I will use:

myFunction('div','background-color','green');
myFunction('span','border-color','blue');
myFunction('i','color','red');

A demo:

http://jsfiddle.net/h4yY3/

But I wish i could call the function only once for all these handlers. For example, I could do something like:

function myFunction({element,property,color}){
...
}

myFunction({'div','background-color','green'},{'span','border-color','blue'},{'i','color','red'});

Could someone please teach me the correct way to do this? I tried a search but do not know if I'm using the correct terms to refer to this as 'handler'.

Please, suggest. Thank you.

Answer 1

Let me know if this helps. I modified the array a little bit for efficiency -

var dummy = [["div", {'color':'red', 'background': 'red'}], 
             ["span", {'color':'red', 'background': 'red'}],
             ["li", {'color':'red', 'background': 'red'}]]
var cssFunction = function (items) {
        $.map(items, function(item){
             $(item[0]).css(item[1]);
        });
    };
cssFunction(dummy);

Answer 2

You could do something like the following (given your description):

// @args { elm: ELM, prop: PROPERTY, val: VALUE },...
function applyCSS() {
  var args = [].slice.call(arguments),
      len = args.length;
  while (len--) {
    var cfg = args[len];
    $(cfg.elm).css(cfg.prop, cfg.val);
  }
}

applyCSS(
  { elm: '.block', prop: 'background-color', val: '#ccc'},
  { elm: '.para', prop: 'color', val: 'blue' },
  { elm: '.thing', prop: 'font-size', val: '14pt' }
);

See this JSBin for an example.

Update : Inspired by @ActiveHigh's version, I think this might be a better organization of the arguments for the function to allow modifying multiple properties on multiple elements in one call (same JSBin example above):

// Alternative version to allow multiple properties per element to be set.
// @args { 'elm': { prop: val, ... }, ... }
function applyCSS2(obj) {
  var elms = Object.keys(obj),
      len = elms.length;

  $.map(elms, function(elm) {
    $(elm).css(obj[elm]);
  });
}

Calling it would look like the following:

applyCSS2({
  '.block': { 'background-color': '#ccc', 'color': '#fff' },
  '.para': { 'color': 'blue', 'font-family': 'Verdana, sans-serif' },
  '.thing': { 'font-size': '14pt', 'letter-spacing': '1em' }
})

Answer 3

Though you can apply css as you want with jquery directly:

$(selector).css({color:"red",background:"black"})

Here an example of what you want

http://jsbin.com/molifece/2/edit