Apply Same CSS to multiple ID's using Jquery

Question

I need an html structure that looks like this:

<div id="ABTestBanner_New">
</div>

<div id="ABTestBanner_Fav">
</div>

<div id="ABTestBanner_Budget">
</div>

I need to use it in an AB split test. So I need to write in javaScript, and I need all three divs to be unique id's but have the same CSS. I tried to do it this way but only the #ABTestBanner_Budget is getting the CSS applied:

var $divNew = $('<div></div>', {'id': 'ABTestBanner_New'});
$('div.samplesCell.samples1').after($divNew)

var $divFav = $('<div></div>', {'id': 'ABTestBanner_Fav'});
$($divNew).after($divFav);

var $divBudget = $('<div></div>', {'id': 'ABTestBanner_Budget'});
$($divFav).after($divBudget);

$('#ABTestBanner_New' && '#ABTestBanner_Fav' && '#ABTestBanner_Budget').css({
    float : 'left',
    height : '250px',
    width : '950px',
    backgroundColor:'#0080FF',
    margin:'20px 0px 20px 0px'
});

Any thoughts on what I am doing wrong?

basic javascript: 'a' && 'b' && 'c' is not doing what you think it's doing... — Marc B
– Marc B, Commented Feb 19, 2014 at 19:56
You might as well have written the following: $(true).css({ blah, blah }); ... just set a bookmark for the API documentation (seen in my previous comment). Any valid string will evaluation to true ... especially when evaluating a function argument with ampersands performing boolean logic. — Joe Johnson
– Joe Johnson, Commented Feb 19, 2014 at 20:08

maximkou · Accepted Answer · 2014-02-19 20:01:30Z

11

See jquery docs here: http://api.jquery.com/category/selectors/

$('#ABTestBanner_New, #ABTestBanner_Fav, #ABTestBanner_Budget').css({
    /*your style*/
});

edited Feb 19, 2014 at 20:01

answered Feb 19, 2014 at 19:53

maximkou

5,3421 gold badge23 silver badges41 bronze badges

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

2 Comments

Joe Johnson Over a year ago

You should NOT have even typed that out. I added the link to the docs (as a comment to the original question). People should not be asking questions like this expecting to be "spoon fed". Devs have spent a lot of time developing good documentation -- we need to point people to the APIs. If they're confused by what they read there -- that's different. But, they should at least look at the documentation first.

maximkou Over a year ago

@JoeJohnson, Thank for feedback, I'm duplicate your link to API in my answer.

Arbel · Accepted Answer · 2014-02-19 20:14:27Z

2

Simply use:

$('div[id^="ABTestBanner"]').css({
    /* styles */
});

DEMO: http://jsfiddle.net/rw53Q/

The div[id^="ABTestBanner"] selector targets all div elements whose id start with ABTestBanner.

edited Feb 19, 2014 at 20:14

answered Feb 19, 2014 at 20:01

Arbel

31.1k2 gold badges31 silver badges31 bronze badges

Comments

Waterskier19 · Accepted Answer · 2014-02-19 20:32:30Z

1

Why don't you just add a class to those elements and style the class the way you want to?

$ABTestBanner_New.addClass("foo");
$ABTestBanner_Fav.addClass("foo");
$ABTestBanner_Budget.addClass("foo");

Adding/Removing a class is a little more efficient than adding inline styles on the fly, it also helps to keep all your styles in the CSS file where they belong. :-)

answered Feb 19, 2014 at 20:32

Waterskier19

1361 silver badge13 bronze badges

Comments

SamotnyPocitac · Accepted Answer · 2014-02-19 19:54:36Z

0

$('#ABTestBanner_New , #ABTestBanner_Fav , #ABTestBanner_Budget').css({
    float : 'left',
    height : '250px',
    width : '950px',
    backgroundColor:'#0080FF',
    margin:'20px 0px 20px 0px'
});

instead of && use comma

answered Feb 19, 2014 at 19:54

SamotnyPocitac

4025 silver badges16 bronze badges

Collectives™ on Stack Overflow

Apply Same CSS to multiple ID's using Jquery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related