jQuery for nontechnical users

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Web Personalization

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.

What is jQuery, and how does Optimizely Experimentation use it?

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.

You must enable jQuery in project settings or include it in your code. See Project Settings: jQuery and Project JavaScript settings for instructions.

A basic line of jQuery looks like:

$("#selector").html("Hello World");

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

$("#selector")

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.

.html("Hello World");

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():

$("#selector").css({"color":"#1964af"});

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. 

Common jQuery 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.

.attr()

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.

$(“#selector”).attr({“src”: “image.png”}); 

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

$(“#selector”).attr({“href”: “example.com”});

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.

$(“#selector”).replaceWith(“<div>Hello World</div>”);

.replaceWith()

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".

$(“#selector”).detach().insertBefore(“.class1”);

.detach().insertBefore() and .insertAfter()

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.

$(“#selector”).detach().insertAfter()

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

.prepend()

$(“#selector”).prepend(“#snazzy”);

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.

.append()

$(“#selector”).append()

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

Manually find jQuery selectors on your page

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.

  • IDs – Unique and can only be associated with one element.
  • Classes – Not unique and can be applied across a group of elements that will have similar attributes.
  • HTML Tags – The hidden keywords within a web page that define how the browser must format and display the content. Classes and IDs, if present, are attributes of HTML tags.
    • For example, the <p> tag defines a paragraph is denoted as
      <p> This is paragraph text residing within paragraph HTML tags. </p>
    • Adding a class as an attribute would then look like:
      <p class=”your-class-name”> This is paragraph text residing within paragraph HTML tags. </p>

    For information on HTML and HTML tags, see the Mozilla documentation on HTML elements reference

  • CSS Paths – Indicate the placement of an element on the page (or DOM). Normally, the Visual Editor will use an ID or Class to identify an element and apply changes to it. If an ID or Class has not been identified, the Editor will use a CSS path instead.

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.  

Manually Finding jQuery Selectors

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.