jQuery - Multiple selectors & multiple values in ONE call

Question

Hi,

I was wondering whether there's a way of using multiple selectors in jQuery and setting different values for them IN ONE CALL.

E.g.:

$(selector1, selector2, selector3, ...).css({left:[532, 112, 453, ...]});

Thanks in advance

Edited: Just to be clear you can only call .css once. Is it possible?

Edited again to clarify: I'm asking because if, for instance, I call animate()... I'd like to keep a unique synchronized call/loop.

Answer 1

Hi there.

I think the only way to do this is to use .each() for example:

$(selector1, selector2, selector3).each(function(idx, element){

  switch(idx)
{
   case : 0
      $(element).css('left', '345');
      break;
   case: 1
      $(element).css('left', '456');
      break;
}
});

EDIT:

the best I can come up with is this:

$(document).ready(
    function() {


    $("div#hello, div#hello1").css('background-color', function(idx, element){

        switch(idx)
        {
            case 0:
                return 'red'

            case 1:
                return 'green'
        }
    });

});

HTML:

<div id="hello">
    <span>test</span>
</div>

<div id="hello1">
    <span>test2</span>
</div>

Cheers. Jas.

Answer 2

Short answer, no you can't do that, the selector and the methods you call aren't connected like that. The selector gets you a set of elements, when that happens the .css() (or any other) function doesn't know what position the element you're in was in the selector.

If you think about it, it could be all positions, then what should it do?

For example:

$("#div, .class1, .class2").css({left:[532, 112, 453]});

What should this do on this HTML:

<div id="div" class="class1 class2"></div>
<div id="div2" class="class2 class1"></div>

You see how it gets confusing real fast, so no, nothing like this is supported.

To be fair, .css() does take a function, like this:

$("#div, .class1, .class2").css('left', function(i, val) {
  //return new left property here
});

But these elements are in the order they occur in the document, not related to the selector at all.

Answer 3

If you only want to change one css value:

var values = [532, 112, 453, ...];
$(selector1, selector2, selector3, ...).css('left', function (i, current) {
    return values[i];
});

Why do you want to do it like that anyway?

jQuery will always loop through all values internally.. it's not magic (and you need to guarantee the index position for each selector will always be the same).

Answer 4

No - not possible (after you have clarified that .css() is allowed to be called exactly once)

Please Note: 1. selector1, selector2, selector3 can match el1, el4, el5, el6 2. Just because something is done behind one function call doesn't mean it is efficient 3. Doing what you are asking doesn't make code easier to read - this makes sense for left but how about some other properties