Rich-text Reply

Targeting Multiple classes not working

adamlcasey 08-27-15

Targeting Multiple classes not working

[ Edited ]

I'm attempting to run an experiment across Desktop/Laptops & Tablets.

 

The experiment inserts a banner into the page, by targeting a div class and using .prepend to insert it before this target div's content.

 

However this content block's changes from desktop to mobile devices, and so has different class names. (.desktop-class and .tablet-class)

 

I've tried targeting both classes by entering the following:

 

 

$(".desktop-class, .tablet-class").prepend("<div id=\"optimizely_1234567"></div>");
...rest of my code...

But when I save this in the Editor the banner disappears.

NOTE: If I remove the tablet class it shows the banner again?

 

How do I target both these classes at the same time or does Optimizely not allow for this?

Re: Targeting Multiple classes not working

[ Edited ]

Hey there,

 

I'm not an expert on jquery, so there might be a different way, but have you tried separating the two out? Have one selector for the desktop class with the prepend function followed by your code block, then immediately after the same thing with the tablet class?

 

Another option could be to select the class above those two so it includes both, but this depends on how your code is structured.

 

- Dan

-----

Daniel


Digital Marketing Manager - mindbodygreen
Optiverse User Group Leader - NYC
JDahlinANF 08-28-15
 

Re: Targeting Multiple classes not working

The jQuery is fine.

For example, run this code on this page and you'll see "Hello" inserted into all of the ".list" (top nav) and all of the ".section" (right-nav) elements.

 

$('.list, .section').prepend('<h1>Hello</h1>');

Does your website have its own jQuery available?  If so, try using the window scope.  This will delay the execution a bit, but when you manipulate the DOM, if you try to manipulate something that doesn't exist, it sometimes causes issues.

 

window.$(".desktop-class, .tablet-class").prepend("<div id=\"optimizely_1234567"></div>");