for-Schleifen

Last updated:

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

{% for item in items %} {{ item }} {% endfor %}
Nachfolgend ein einfaches Beispiel, das zeigt, wie eine Sequenz von Variablenwerten in eine Liste gedruckt wird.
{% set languages = ["HTML", "CSS", "Javascript", "Python", "Ruby", "PHP", "Java"] %} <h1>Languages</h1>; <ul> {% for language in languages %} <li>{{ language }}</li> {% endfor %} </ul><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>

Schleifeneigenschaften

Beim Durchlaufen einer Schleife können Sie die bedingte Logik 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:
VariableDescription
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.

{% set loopy = ["Content", "Social", "Contacts", "Reports"] %} {% for app in loopy %} {{ loop.index }}. {{app}} <br> {% endfor %}1. Content <br> 2. Social <br> 3. Contacts <br> 4. Reports <br>

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.

{% 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 %}<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>

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.

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

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.

{% for content in contents %} <div class="post-item {% cycle "odd","even" %}">Blog post content</div> {% endfor %}<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>

Variablen innerhalb von Schleifen

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.

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:

{% set dict_var = {"name": "Cool Product", "price": "$20", "size":"XL"} %} {% for key, val in dict_var.items() %} {{ key }}: {{ val }}<br> {% endfor %}name: Cool Product <br> price: $20 <br> size: XL <br>

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.

{% for x in range(0,5) %} {{loop.index}} {% endfor %}1 2 3 4 5

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

{% for item in module.icon_field %} {% icon name="{{ item.name }}", style="{{ item.type }}", unicode="{{ item.unicode }}", unique_in_loop=True %} {% endfor %}
War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.