WT.Sizzle

SizzleJS is the selector engine used by our Visual Editor (VE). It is availble under WT.Sizzle.

When you’re in the VE and click on an element, a selector reference is generated specifically for that element. When rendering the projects on the page, these selectors are passed into WT.Sizzle to fetch the matching elements.

Whilst this is the primary use-case for having the library, you are also free to utilise the library if you choose to. There are some useful examples below:

var $s = WT.Sizzle;

$s('body') // get the "body" element
$s('div.myclass') // get all "div"s that have the classname "myclass"
$s('span:contains(Total)') // get all "span"s that contain the text "Total"
$s('span[attribute="value"]') // get all "span"s with this attribute/value exact match
$s('span[attribute*="value"]') // get all "span"s with this attribute/value partial match (actual value must contain queried value)
$s('span:not(.myClass)') // get all "span"s that do not have myClass as a classname