Cycle command
Maske it easy to cycle through a sequence of different elements to style them differently.
Basic Usage (HTML)
data-jkit="[cycle:sequence=odd,even]"
Advanced Init (JavaScript)
$('#myelement').jKit('cycle', { 'sequence': 'odd,even' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| what | “class”, “html”, “attr.id” or “css.color” | class | What element property should be cycled? |
| where | DOM element | li | Which DOM elements should be affected? |
| scope | “all” or “children” | children | Affect only the direct children or all elements? |
| sequence | Comma separated strings | odd,even | The values that should be repeated. |
Events
Examples
Odd/even rows:
Add “odd” and “even” classes to the immediate children list items:
- List entry 1
- List entry 2
- List entry 3
-
List entry 4
- Sub entry 1
- Sub entry 2
- Sub entry 3
- List entry 5
Source:
<ul data-jkit="[cycle:what=class;where=li;scope=children;sequence=odd,even]"> <li>List entry 1</li> <li>List entry 2</li> <li>List entry 3</li> <li> List entry 4 <ul> <li>Sub entry 1</li> <li>Sub entry 2</li> <li>Sub entry 3</li> </ul> </li> <li>List entry 5</li> </ul>
Odd/even rows #2:
Add “odd” and “even” classes to all list items:
- List entry 1
- List entry 2
- List entry 3
-
List entry 4
- Sub entry 1
- Sub entry 2
- Sub entry 3
- List entry 5
Source:
<ul data-jkit="[cycle:what=class;where=li;scope=all;sequence=odd,even]"> <li>List entry 1</li> <li>List entry 2</li> <li>List entry 3</li> <li> List entry 4 <ul> <li>Sub entry 1</li> <li>Sub entry 2</li> <li>Sub entry 3</li> </ul> </li> <li>List entry 5</li> </ul>
Odd/even rows #3:
Do some direct inline css styling:
- List entry 1
- List entry 2
- List entry 3
-
List entry 4
- Sub entry 1
- Sub entry 2
- Sub entry 3
- List entry 5
Source:
<ul data-jkit="[cycle:what=css.color;where=li;scope=all;sequence=#000,#f30]"> <li>List entry 1</li> <li>List entry 2</li> <li>List entry 3</li> <li> List entry 4 <ul> <li>Sub entry 1</li> <li>Sub entry 2</li> <li>Sub entry 3</li> </ul> </li> <li>List entry 5</li> </ul>
A longer sequence:
Of course you can cycle with more than two options, as many as you want actually:
- List entry 1
- List entry 2
- List entry 3
-
List entry 4
- Sub entry 1
- Sub entry 2
- Sub entry 3
- List entry 5
Source:
<ul data-jkit="[cycle:what=css.color;where=li;scope=all;sequence=#000,#03f,#f30]"> <li>List entry 1</li> <li>List entry 2</li> <li>List entry 3</li> <li> List entry 4 <ul> <li>Sub entry 1</li> <li>Sub entry 2</li> <li>Sub entry 3</li> </ul> </li> <li>List entry 5</li> </ul>
A combination of commands:
You can of course combine it with other commands, for example to create rainbow text:
This is some example text, it will look like a rainbow … hopefully.
Source:
<div id="rainbow1" style="font-size:20px;font-weight:bold" data-jkit="[split:container=span][cycle:what=css.color;where=span;sequence=#FF0000,#FF7F00,#FFE100,#00FF00,#0000FF,#6600FF,#8B00FF]">This is some example text, it will look like a rainbow ... hopefully.</div>
Empty cycles:
You can just affect every 4th character like this:
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Source:
<div id="ever4" style="font-size:20px;font-weight:bold" data-jkit="[split:container=span][cycle:what=css.color;where=span;sequence=,,,#f30]">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]