Admettons qu’on souhaite ajouter, dans une boucle, une classe de type color-x (où x correspond à une valeur qui doit s’incrémenter) sur un élément <li> qui se répète en fonction du nombre d’entrées disponibles dans notre menu. Exemple du résultat attendu :
|
1 2 3 4 5 6 7 8 |
<ul class="level1"> <li class="color-0"> <li class="color-1"> <li class="color-2"> <li class="color-3"> <li class="color-4"> <li class="color-5"> </ul> |
Commencer par repérer la boucle dans laquelle se trouve l’élément qui se répète sur lequel nous souhaitons agir. Dans un menu Change, les boucles sont mises en place à l’aide de la condition tal:repeat. Exemple :
|
1 2 |
<ul tal:condition="parent/hasChildren" class="level${parent/getChildrenLevel}"> <tal:block tal:repeat="entry parent/getChildren"> |
Dans note exemple, il est important de repérer ce qu’on souhaite répéter. Ici, il s’agit de la première information déclarée en arguments dans le tal:repeat à savoir entry.
Ensuite, repérer l’élément sur lequel on souhaite ajouter notre classe de type color-x et ajouter la valeur à incrémenter comme suit :
|
1 |
<li class="color-${repeat/entry/index}"> |
Note : on retrouve notre information entry au sein de la chaîne de caractère : ${repeat/entry/index}.