Nitrogen - JQuery Paths

DEMOS / JQuery Paths

Many commands in Nitrogen take a parameter to specify which element or elements to target. In Nitrogen 1.x, these commands took a single ElementID, and could only act upon one element at a time.

Beginning with Nitrogen 2.x, Nitrogen allows you to use the full power of jQuery selectors to reference elements.

This demo shows how to use jQuery selectors to target multiple elements with a single #event{} action. The same principles apply to calls to wf:wire/N, wf:update/2, etc.

See jQuery selector documentation for more information on jQuery selectors.

View Module Source

Click to highlight all boxes with TargetPath== ".box"
Click to highlight all boxes with TargetPath == ".box:even"
Click to highlight all boxes with TargetPath == ".box:odd"

Box 0

Box 1

Box 2

Box 3

Box 4

jQuery selectors can be used in all places where a trigger or target are specified, ie:

wf:wire(TargetPath, ...actions...)

wf:wire(TriggerPath, TargetPath, ...actions...)

#event { target=TargetPath }

#event { trigger=TriggerPath, target=TargetPath }

TriggerPath and TargetPath can be in the following forms:

element3 - Targets 'element3'.
element1.element2.element3 - Nested elements. This also targets 'element3', but only when it's nested inside element2, which in turn must be nested under element1.
element1.element3 - Similar to above. You can skip the middle elements.
me - In an action, you can refer to the target of the action by specifying the atom 'me'.
".class1" - By specifying a string, you can switch to JQuery style selectors.
".class1 .class2" - Selects all elements with .class2 that are inside of elements with .class1.
".class1 > .class2" - Selects all elements with .class2 that are direct children of elements with .class1.
".class1:odd" - Selects all elements with .class2, then keeps only the odd ones.

Released under the MIT License.