Conditionally setting properties in jQuery.css()

Question

I have like 40 foo's on the page, and each one is assigned a left/top value in another function.

$('.foo').css({
  top: isOn ? current_top_value_here : 500,
  left: isOn ? current_left_value_here : 500
});

so, I want to leave the top & left properties unmodified if isOn is true. How can I do that?

what is isOn? Javascript variable?

Abe Miessler
– Abe Miessler

2011-06-24 16:33:14 +00:00
Commented Jun 24, 2011 at 16:33 — Abe Miessler
– Abe Miessler, Commented Jun 24, 2011 at 16:33

kapa · Accepted Answer · 2011-06-24 16:48:43Z

5

This way you can ensure they are only added if it's needed. Set up the object first with those values that you want assigned, and conditionally add some more. Then you can pass the object to your .css().

var cssProperties={
    'color' : 'yellow',
    ...
};

if (isOn) {
    cssProperties.top=500;
    cssProperties.left=500;
    /* alternative: $.extend(cssProperties, { 'top': 500, 'left': 500 }); */
}

$('.foo').css(cssProperties);

edited Jun 24, 2011 at 16:48

answered Jun 24, 2011 at 16:43

kapa

78.9k21 gold badges166 silver badges178 bronze badges

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

1 Comment

kapa Over a year ago

In case I have misunderstood something, please show more of your code and explain what you need in a bit more detail. There might be good alternatives.

James Montagne · Accepted Answer · 2011-06-24 16:33:27Z

2

The best way would probably just be to not call it at all. If you have other css you're setting in the same statement, just split it apart:

if(!isOn){
  $('.foo').css({
    top: 500,
    left: 500
  });
}

$('.foo').css({
   // other stuff
});

answered Jun 24, 2011 at 16:33

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

4 Comments

Alex Over a year ago

but that means I have to duplicate my code, add like 20 lines+. I also have a animate function where I need to conditionally animate these properties too...

kapa Over a year ago

At least save the jQuery collection first, running $('.foo') twice is not a good practice.

James Montagne Over a year ago

@baz Yup, was just illustrating the idea, not optimizing it. Your idea is better anyway though, now that the question is further explained.

kapa Over a year ago

Meant no offense, just wanted to mention it in case somebody visits this question later for a code example to use :).

Collectives™ on Stack Overflow

Conditionally setting properties in jQuery.css()

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related