Le bloc-notes professionnel d'un développeur front-end senior
Source: How to loop through array in jQuery?
|
1 2 3 4 |
var i; for (i = 0; i < substr.length; ++i) { // do something with `substr[i]` } |
|
1 2 3 |
jQuery.each(substr, function(index, item) { // do something with `item` (or `this` is also `item` if you like) }); |
|
1 2 3 |
substr.forEach(function(item) { // do something with `item` }); |
Attention: le plugin for.less utilisé dans l’exemple ci-dessous est déprécié selon un commenatire laissé dans le code source de l’auteur. Il faut désormais utiliser List/Array manipulation for Less.
Source: Loop over an array of name value pairs in LESS et mixin sous Git.
CSS color codes & names (tableaux de correspondances Nom de couleur > Code hexadécimal).
Mixin LESS (ne pas oublier d’inclure le mixin for.less) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.Couleur { .facet-mark { &:before { display: inline-block; vertical-align: sub; content: "" !important; width: 18px; height: 18px; border: 1px solid #ededed; } } @facetColors: Beige #DEB887, Blanc #ffffff, Bleu #00b0f0, Gris #777777, Jaune #ffe209, Marron #974706, Multicolore linear-gradient(to right, #9400D3 0%,#4B0082 (100%/7)*2,#0000FF (100%/7)*3,#00FF00 (100%/7)*4,#FFFF00 (100%/7)*5, #FF7F00 (100%/7)*6,#FF0000 100%), Noir #000000, Orange #fb6e05, Rose #ff338a, Rouge #ff0000, Vert #00b050, Violet #800080; .for(@facetColors); .-each(@value) { @name: extract(@value, 1); .@{name} { .facet-mark { &:before { background: extract(@value, 2); } } } } } |
Rendu CSS :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.Couleur .facet-mark:before { display: inline-block; vertical-align: sub; content: "" !important; width: 18px; height: 18px; border: 1px solid #ededed; } .Couleur .Beige .facet-mark:before { background: #000; } .Couleur .Blanc .facet-mark:before { background: #fff; } .Couleur .Bleu .facet-mark:before { background: #00b0f0; } .Couleur .Gris .facet-mark:before { background: #777; } .Couleur .Jaune .facet-mark:before { background: #ffe209; } .Couleur .Marron .facet-mark:before { background: #974706; } .Couleur .Multicolore .facet-mark:before { background: #000; } .Couleur .Noir .facet-mark:before { background: #000; } .Couleur .Orange .facet-mark:before { background: #fb6e05; } .Couleur .Rose .facet-mark:before { background: #ff338a; } .Couleur .Rouge .facet-mark:before { background: red; } .Couleur .Vert .facet-mark:before { background: #00b050; } .Couleur .Violet .facet-mark:before { background: #000; } |
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}.