jQuery for nontechnical users

Use these common jQuery functions in the custom code editor, even if you are primarily a Visual Editor user.

See Project Settings: jQuery and Project JavaScript settings.

Optimizely Experimentation runs your variations on your page by modifying the elements on the page. To do this, it needs a way to execute the changes. Optimizely Experimentation does this through jQuery, a JavaScript library.

A basic line of jQuery looks like:

The first part before the period is the selector, which specifies the element, ID, or class that is modified.

The custom code editor will attempt to identify elements with IDs first because they tend to be the most unique. As in CSS, IDs are identified by the pound or hashtag symbol (#), and classes are identified by a leading period (.).

The second part after the period is the method.

The method will make the changes to the selector. In the sample code above, the html() method changes the HTML contents of the selected element to the text "Hello World".

For example, you commonly use the Visual Editor to change the style of an element. This makes use of the css() method which changes the CSS properties of the selected element. You want to change the color of the 'Hello World' text to blue (hex value: #1964af). The selector is the same, and the html() method is replaced with css():

The two items inside the curly braces { } and double quotes " " are the CSS property and value you want your element to take on. See the jQuery API documentation for a full list of available methods. 

Here are several different methods that you will see when you use the Visual Editor to make changes or that you can use to make simple changes yourself.

The .attr() method will "Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element" See jQuery's documentation on .attr() for more.

Here, the selector gets an image source assigned as an attribute, changing an existing image or adding one to the selected element.

Here, the selector is turned into a hyperlink that directs to the URL in quotes.

An .attr() method call is most commonly generated when using Change Image or Make Hyperlink features.

The .replaceWith() method will "Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed." See jQuery's documentation on replaceWith() for more.

In this case, any selector with ID "selector" will have its contents replaced with a division, inside of which is the phrase “Hello World.” This method is most commonly generated in the Visual Editor when using "Edit HTML".

The .detach().insertBefore() method will remove the selected element from its parents and children elements on the Document Object Model (DOM) and insert it before the class "class1" element. On the HTML tree, it is on the same "level" as the element it was inserted before. That is, it is neither child nor parent of $(“.class1”). You will see these methods generated in the Visual Editor when you rearrange elements on a page.

Same as .insertBefore(), except it will insert after rather than before. The Visual Editor calls this method when you rearrange elements on the page.

The .prepend() method will add the selector before the element #snazzy. Like .insertBefore(), it is on the same level as the #snazzy. That is, it is neither child nor parent of #snazzy.

Same as above except after. Oftentimes, an .append() method call is generated when inserting an element such as an image.  

You may want to make changes to an element in a variation and move it around on the page. When you move an element, Optimizely Web Experimentation may not know where to look for it, but you can use a jQuery selector to manually identify it and make your changes.

A jQuery selector is an identifier used to apply a jQuery method to an element. It can be an element’s ID, Class, HTML Tag, or CSS Path.

Navigation menus, search result pages, and drop-down lists are examples of elements that may sort and display information differently. If you want to test the order of your nav elements or highlight some menu options by moving them to the left-most position, you would not want to use CSS paths as your jQuery selectors. If these elements' CSS paths change, then the Visual Editor may not point to the correct path.  

To make changes to elements independent of their position, try using a jQuery method that manually finds elements within (or "traverses") the DOM. The jQuery contains() method is one way of traversing the DOM, as it lets you search for elements that contain specific text.

Example:

To target specific nav elements, for example, the “Where We Are” link, you would want to traverse the DOM using a:contains('Where We Are'). In this case, the appropriate selector would then be $(“main_nav > .horizontal”).contains(“Where We Are”)

See jQuery traversal methods.