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

# for-Schleifen

> For-Schleifen können in HubL verwendet werden, damit Sequenzen von Objekten durchlaufen werden. 

for-Schleifen können in HubL verwendet werden, damit Sequenzen von Objekten durchlaufen werden. Sie werden am häufigsten bei der Darstellung von [Blog-Inhalten](/cms/start-building/building-blocks/templates/blog) in einem Listenformat verwendet, können aber auch zum Sortieren anderer Sequenzvariablen verwendet werden.

for-Schleifen beginnen mit einer `{% for %}`-Anweisung und enden mit einer `{% endfor %}`-Anweisung. Innerhalb der `{% for %}`-Anweisung wird ein einzelnes Sequenzelement genannt, gefolgt von `in` und dem Namen der Sequenz. Der Code zwischen den öffnenden und schließenden `for`-Anweisungen wird bei jeder Iteration gedruckt und enthält im Allgemeinen die gedruckte Variable des einzelnen Sequenzelements. Im Folgenden finden Sie die grundlegende Syntax einer for-Schleife:

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

Nachfolgend ein einfaches Beispiel, das zeigt, wie eine Sequenz von Variablenwerten in eine Liste gedruckt wird.

<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>

## Schleifeneigenschaften

Beim Durchlaufen einer Schleife können Sie die [bedingte Logik](/cms/reference/hubl/if-statements) verwenden, um das Verhalten der Schleife zu definieren. Die variable Eigenschaft `loop.index` speichert die aktuelle Anzahl der Iterationen der Schleife. Es gibt mehrere andere Eigenschaften von Schleifenvariablen, die die Iterationen auf unterschiedliche Weise zählen. Diese Eigenschaften werden im Folgenden beschrieben:

| Variable         | Description                                                                                              |
| ---------------- | -------------------------------------------------------------------------------------------------------- |
| `loop.cycle`     | Eine Hilfsfunktion, um zwischen einer Liste von Sequenzen zu wechseln. Siehe die nachstehende Erklärung. |
| `loop.depth`     | Gibt an, wie tief in einer rekursiven Schleife das Rendering gerade ist. Beginnt bei Ebene 1             |
| `loop.depth0`    | Gibt an, wie tief in einer rekursiven Schleife das Rendering gerade ist. Beginnt bei Ebene 0             |
| `loop.first`     | Diese Variable wird als true ausgewertet, wenn es sich um die erste Iteration der Schleife handelt.      |
| `loop.index`     | Die aktuelle Iteration der Schleife. Diese Variable beginnt mit der Zählung bei 1.                       |
| `loop.index0`    | Die aktuelle Iteration der Schleife. Diese Variable beginnt die Zählung bei 0.                           |
| `loop.last`      | Diese Variable wird als true ausgewertet, wenn es sich um die letzte Iteration der Schleife handelt.     |
| `loop.length`    | Die Anzahl der Elemente in der Sequenz                                                                   |
| `loop.revindex`  | Die Anzahl der Iterationen ab dem Ende der Schleife. Wird rückwärts gezählt bis 1.                       |
| `loop.revindex0` | Die Anzahl der Iterationen ab dem Ende der Schleife. Wird rückwärts gezählt bis 0.                       |

Im Folgenden finden Sie einige Beispiele, in denen verschiedene Schleifenvariablen verwendet werden. Das folgende einfache Beispiel verwendet `loop.index`, um eine Zählung durchzuführen, die bei jeder Iteration ausgegeben wird.

<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>

Das nächste Beispiel verwendet bedingte Logik, um zu prüfen, ob die Länge der Schleife durch bestimmte Zahlen teilbar (`divisibleby`) ist. Anschließend wird die Breite des Post-Item-Divs entsprechend angepasst. Das Beispiel verwendet die Standardschleife für Blog-Beiträge und geht davon aus, dass die Schleife 6 Beiträge enthält.

<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>

## Verschachtelte Schleifen

Schleifen können auch mit Schleifen verschachtelt werden. Die untergeordnete for-Schleife wird bei jeder Iteration der übergeordneten for-Schleife ausgeführt. Im folgenden Beispiel wird eine Liste untergeordneter Elemente in einem verschachtelten `<ul>` innerhalb eines `<ul>` von übergeordneten Elementen gedruckt.

<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

Das cycle-Tag kann innerhalb einer for-Schleife verwendet werden, um eine Reihe von Zeichenkettenwerten zu durchlaufen und sie bei jeder Iteration zu drucken. Eine der praktischsten Anwendungen dieses Verfahrens ist die Anwendung alternierender Klassen auf Ihre Blog-Beiträge in einem Listing. Dieses Tag kann für mehr als zwei Werte verwendet werden und wiederholt den Zyklus, wenn es mehr Schleifenwiederholungen als Zykluswerte gibt. Im folgenden Beispiel wird eine Klasse von `odd` und `even` auf Beiträge in einem Listing angewendet (das Beispiel geht davon aus, dass es 5 Beiträge in der Schleife gibt).

Bitte beachten Sie, dass **keine Leerzeichen** zwischen den durch Kommata getrennten Werten der Zykluszeichenfolge stehen.

<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>

## Variablen innerhalb von Schleifen

<Warning>
  Alle innerhalb von Schleifen definierten Variablen sind auf den Bereich dieser Schleife beschränkt und können nicht von außerhalb der Schleife aufgerufen werden.
</Warning>

Sie können Variablen, die außerhalb einer Schleife definiert sind, aus einer Schleife heraus aufrufen, aber nicht umgekehrt.

## Schlüssel-Werte-Paare in Schleifen

Wenn das Dictionary von Informationen, das Sie in einer Schleife durchlaufen, über Schlüssel- und Wertepaare verfügt, hätte eine einfache for-Schleife nur Zugriff auf die Werte. Wenn Sie innerhalb der for-Schleife sowohl auf die Schlüssel als auch auf die Werte zugreifen möchten, würde die HubL so formatiert werden:

<CodeGroup>
  ```text eingabe.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 ausgabe.txt theme={null}
  name: Cool Product <br />
  price: $20 <br />
  size: XL <br />
  ```
</CodeGroup>

## Eine bestimmte Anzahl von Iterationen durchführen

Manchmal möchte man eine bestimmte Anzahl von Iterationen durchführen, was beim Generieren von HTML oder CSS nützlich sein kann. Dies können Sie mithilfe der range-Funktion tun.

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

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

## Verwendung von HubL-Tags in Schleifen

Wenn Sie der Seite ein Tag hinzufügen, weist HubSpot dem umschließenden HTML-Code automatisch eine `id` zu. Dieses Tag ist eindeutig pro name-Tag. In Situationen, in denen Sie ein Tag in einer for-Schleife verwenden müssen, ist die Festlegung eindeutiger Namen nicht sinnvoll. Fügen Sie den `unique_in_loop`-Parameter zu Ihrem Tag hinzu, um eindeutige IDs zu generieren. Dieser Parameter fügt den Modulnamen an die Nummer der aktuellen SchleifeniIeration an, um sicherzustellen, dass er eindeutig ist. Eindeutige IDs werden nicht nur für gültigen HTML benötigt, sondern sind auch für die [Barrierefreiheit](/cms/best-practices/improve-existing-sites/accessibility) wichtig.

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