Setting jQuery .css() within "for .. in" loop

Question

This works OK:

$(container_elm).css({
  'border-width':'1px'
})

Now I am trying to pass CSS propertyName : value as a parameter to a function:

function my_func(css_arr) {
  if (css_arr!==null && css_arr!=='') {
    for(var x in css_arr) {
      if(css_arr.hasOwnProperty(x)) {
        y=css_arr[x];
        x_new='"'+x+'"';
        y_new='"'+y+'"';

        $(container_elm).css({
            //'border-width':'1px' // this works
            //x:y // this does NOT work
            //x_new:y_new // this does NOT work
        });
        //console.log(x_new, y_new); //returns "border-width" "1px"
        //console.log(x, y); //returns border-width 1px
      }
    }
  }
}

//usage
my_func({'border-width':'1px'});

How can I pass CSS object "propertyName : value", and make .css() receive it and work?

Edit

Demo - http://jsfiddle.net/BRwzF/5/

Maybe you could provide a working example in a jsfiddle.com ? — Jonas G. Drange
– Jonas G. Drange, Commented Aug 2, 2012 at 17:17

SomeKittens · Accepted Answer · 2012-08-02 17:21:46Z

2

Instead of mucking about with x and x_new, etc, if you're passing in JSON already, why not do this:

$(container_elm).css(
    css_arr
);

answered Aug 2, 2012 at 17:21

SomeKittens

39.6k19 gold badges117 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ihtus Over a year ago

good idea, but I get "SyntaxError: invalid object initialize" in firebug console

ihtus Over a year ago

sorry, my fault, yes it works. But any idea why the code with for in loop does not work?

SomeKittens Over a year ago

You're using the for...in loop incorrectly. There's no need for it here.

ihtus Over a year ago

now I see I don't need for...in here. But anyway how should I use correctly in my case?

Christoph Over a year ago

@ihtus no need for the function altogether just use $(el).css({'border-width':'1px'}). You can pass a complete object and also something like {"left":"+=20"}

|

codef0rmer · Accepted Answer · 2012-08-02 17:41:46Z

1

I totally agree with what @Somkittens suggested. Just want to brief you about why x_new:y_new did not work for you.

In .css() jquery function, a key/property does not get parsed or treated as a variable, so putting $('dom').css('width': '100px') or $('dom').css(width: '100px') does not make any difference. We wrap properties in quotes in case it has hyphens in it. i.e. border-radius, -webkit-border-radius etc.

But still if you want to go with your solution, in that case you have tweak your code a bit which does the same thing as @SomeKittens's

 y=css_arr[x];
 x_new=x;
 y_new=y;
 var foobar = {};
     foobar[x_new] = y_new;
 $(container_elm).css(foobar);

Demo: http://jsfiddle.net/4tBVH/

answered Aug 2, 2012 at 17:41

codef0rmer

10.5k9 gold badges55 silver badges78 bronze badges

Comments

Ricardo Lohmann · Accepted Answer · 2012-08-02 17:28:54Z

0

You don't need for to do this.
css_arr is an object with css style. You can pass it directly to the .css().
Example: $(container_elm).css(css_arr);

Suggestion: Change css_arr to style.

demo

answered Aug 2, 2012 at 17:28

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

1 Comment

ihtus Over a year ago

thank you. But any idea why the code with for in loop does not work?

Collectives™ on Stack Overflow

Setting jQuery .css() within "for .. in" loop

Edit

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related