> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.fr/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Boucles for

> Les boucles for peuvent être utilisées dans HubL pour itérer dans des séquences d'objets. 

Les boucles for peuvent être utilisées dans HubL pour itérer dans des séquences d'objets. Elles seront le plus souvent utilisées pour rendre le [contenu du blog](/docs/cms/start-building/building-blocks/templates/blog) dans un format de liste, mais elles peuvent également être utilisées pour trier d'autres variables de séquence.

Les boucles for commencent par une fonction `{% for %}` et se terminent par une fonction `{% endfor %}`. Dans la fonction `{% for %}`, un seul élément de séquence est nommé, suivi de `in`, puis du nom de la séquence. Le code entre les fonctions `for` d'ouverture et de fermeture est imprimé à chaque itération, et comprend généralement la variable imprimée de l'élément de séquence individuel. Vous trouverez ci-dessous la syntaxe de base d'une boucle for :

```hubl theme={null}
{% for item in items %}
	{{ item }}
{% endfor %}
```

Vous trouverez ci-dessous un exemple de base qui montre comment imprimer une séquence de valeurs de variable dans une liste.

<CodeGroup>
  ```html example.html theme={null}
  {% set languages = ["HTML", "CSS", "Javascript", "Python", "Ruby", "PHP", "Java"] %}

  <h1>Languages</h1>;
  <ul>
  {% for language in languages %}
  <li>{{ language }}</li>
  {% endfor %}
  </ul>
  ```

  ```html example.html theme={null}
  <h1>Languages</h1>
  <ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
  <li>Python</li>
  <li>Ruby</li>
  <li>PHP</li>
  <li>Java</li>
  </ul>
  ```
</CodeGroup>

## Propriétés de boucle

Lorsqu'une boucle est itérative, vous pouvez utiliser la [logique conditionnelle](/docs/cms/reference/hubl/if-statements) pour définir son comportement. La propriété de variable `loop.index` tient un compte du nombre actuel d'itérations de la boucle. Il existe plusieurs autres propriétés de variable de boucle qui comptabilisent les itérations de différentes manières. Ces propriétés sont décrites ci-dessous :

| Variable         | Description                                                                                               |
| ---------------- | --------------------------------------------------------------------------------------------------------- |
| `loop.cycle`     | Une fonction d'aide pour faire un cycle entre une liste de séquences. Consultez l'explication ci-dessous. |
| `loop.depth`     | Indique à quelle profondeur d'une boucle récursive se trouve actuellement le rendu. Commence au niveau 1. |
| `loop.depth0`    | Indique à quelle profondeur d'une boucle récursive se trouve actuellement le rendu. Commence au niveau 0. |
| `loop.first`     | Cette variable est définie sur true s'il s'agit de la première itération de la boucle.                    |
| `loop.index`     | L'itération actuelle de la boucle. Cette variable commence la comptabilisation à 1.                       |
| `loop.index0`    | L'itération actuelle de la boucle. Cette variable commence la comptabilisation à 0.                       |
| `loop.last`      | Cette variable est définie sur true s'il s'agit de la dernière itération de la boucle.                    |
| `loop.length`    | Le nombre d'éléments dans la séquence.                                                                    |
| `loop.revindex`  | Le nombre d'itérations à partir de la fin de la boucle. Compte à rebours jusqu'à 1.                       |
| `loop.revindex0` | Le nombre d'itérations à partir de la fin de la boucle. Compte à rebours jusqu'à 0.                       |

Vous trouverez ci-dessous quelques exemples qui utilisent différentes variables de boucle. L'exemple de base suivant utilise `loop.index` pour conserver un compte qui est imprimé à chaque itération.

<CodeGroup>
  ```html example.html theme={null}
  {% set loopy = ["Content", "Social", "Contacts", "Reports"] %}
  {% for app in loopy %}
  {{ loop.index }}. {{app}} <br>
  {% endfor %}
  ```

  ```html example.html theme={null}
  1. Content <br />
  2. Social <br />
  3. Contacts <br />
  4. Reports <br />
  ```
</CodeGroup>

L'exemple suivant utilise une logique conditionnelle pour vérifier si la longueur de la boucle est `divisible par` certains nombres. La largeur de la division est alors restituée en conséquence. L'exemple utilise la boucle standard des articles de blog et suppose qu'il y a 6 articles dans la boucle.

<CodeGroup>
  ```html example.html theme={null}
  {% for content in contents %}
  {% if loop.length is divisibleby 4 %}
  <div style="width:25%">Post content</div>

  {% elif loop.length is divisibleby 3 %}
  <div style="width:33.33332%">Post content</div>

  {% else %}
  <div style="width:50%">Post content</div>

  {% endif %}
  {% endfor %}
  ```

  ```html example.html theme={null}
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  ```
</CodeGroup>

## Boucles imbriquées

Les boucles peuvent également être imbriquées dans d'autres boucles. La boucle for enfant sera exécutée à chaque itération de la boucle for parent. Dans l'exemple ci-dessous, une liste d'éléments enfants est imprimée dans un élément `<ul>` imbriqué dans un élément `<ul>` d'éléments parents.

<CodeGroup>
  ```html example.html theme={null}
  {% set parents = ["Parent item 1", "Parent item 2", "Parent item 3"] %}
  {% set children = ["Child item 1", "Child item 2", "Child item 3"] %}
  <ul>
  {% for parent in parents %}
  <li>{{parent}}<ul>
  {% for child in children %}
  <li>{{child}}</li>
  {% endfor %}
  </ul>
  </li>
  {% endfor %}
  </ul>
  ```

  ```html example.html theme={null}
  <ul>
  <li>
  Parent item 1
  <ul>
  <li>Child item 1</li>
  <li>Child item 2</li>
  <li>Child item 3</li>
  </ul>
  </li>

  <li>
  Parent item 2
  <ul>
  <li>Child item 1</li>
  <li>Child item 2</li>
  <li>Child item 3</li>
  </ul>
  </li>

  <li>
  Parent item 3
  <ul>
  <li>Child item 1</li>
  <li>Child item 2</li>
  <li>Child item 3</li>
  </ul>
  </li>
  </ul>
  ```
</CodeGroup>

## cycle

La balise cycle peut être utilisée dans une boucle for pour parcourir une série de valeurs de chaîne et les imprimer à chaque itération. L'une des applications les plus pratiques de cette technique consiste à appliquer des classes alternées à vos articles de blog dans une liste. Cette balise peut être utilisée sur plus de deux valeurs et répétera le cycle s'il y a plus d'itérations de boucle que de valeurs de cycle. Dans l'exemple ci-dessous, une classe d'éléments `odd` et `even` est appliquée aux articles d'une liste (l'exemple suppose qu'il y a 5 articles dans la boucle).

Veuillez noter qu'il n'y a **pas d'espace** entre les valeurs des chaînes de cycle séparées par des virgules.

<CodeGroup>
  ```html example.html theme={null}
  {% for content in contents %}
  <div class="post-item {% cycle "odd","even" %}">Blog post content</div>
  {% endfor %}
  ```

  ```html example.html theme={null}
  <div class="post-item odd">Blog post content</div>
  <div class="post-item even">Blog post content</div>
  <div class="post-item odd">Blog post content</div>
  <div class="post-item even">Blog post content</div>
  <div class="post-item odd">Blog post content</div>
  ```
</CodeGroup>

## Variables dans les boucles

<Warning>
  Toutes les variables définies dans les boucles sont limitées à la portée de cette boucle et ne peuvent pas être exécutées depuis l'extérieur de la boucle.
</Warning>

Vous pouvez exécuter des variables définies en dehors d'une boucle, à partir d'une boucle, mais pas l'inverse.

## Paires (clé, valeur) dans les boucles

Si le dictionnaire d'informations que vous parcourez en boucle comporte des paires (clé, valeur), une simple boucle for n'aurait accès qu'aux valeurs. Si vous souhaitez avoir accès à la fois aux clés et aux valeurs dans la boucle for, le HubL sera formaté comme suit :

<CodeGroup>
  ```text entrée.txt theme={null}
  {% set dict_var = {"name": "Cool Product", "price": "$20", "size":"XL"} %}
  {% for key, val in dict_var.items() %}
  {{ key }}: {{ val }}<br>
  {% endfor %}
  ```

  ```text sortie.txt theme={null}
  name: Cool Product <br />
  price: $20 <br />
  size: XL <br />
  ```
</CodeGroup>

## Itérer un nombre défini de fois

Parfois, vous souhaitez itérer un nombre défini de fois, ce qui peut être utile pour générer du HTML ou des CSS. Pour ce faire, vous pouvez utiliser la fonction de plage.

<CodeGroup>
  ```html example.html theme={null}
  {% for x in range(0,5) %}
  {{loop.index}}
  {% endfor %}
  ```

  ```text sortie rendue.txt theme={null}
  1 2 3 4 5
  ```
</CodeGroup>

## Utilisation des balises HubL dans des boucles

Lorsque vous ajoutez une balise à une page, HubSpot attribue automatiquement un `id` au HTML d'encadrement. Cette balise est unique par nom de balise. Si vous devez utiliser une balise dans une boucle for, la définition de noms uniques n'est pas pratique. Ajoutez le paramètre `unique_in_loop` à votre balise pour générer des identifiants uniques. Ce paramètre ajoute le nom du module au numéro d'itération de la boucle en cours, ce qui garantit qu'il est unique. Les identifiants uniques ne sont pas seulement nécessaires à la validité du code HTML. Ils sont également importants pour l'[accessibilité](/docs/cms/best-practices/improve-existing-sites/accessibility).

```hubl theme={null}
{% for item in module.icon_field %}
	{% icon
		name="{{ item.name }}",
		style="{{ item.type }}",
		unicode="{{ item.unicode }}",
        unique_in_loop=True
	%}
{% endfor %}
```