Bucles for

Last updated:

Los bucles for se pueden utilizar en HubL para iterar a través de secuencias de objetos. Lo más habitual es que se utilicen con la renderización del contenido del blog en formato de listado, pero también pueden utilizarse para ordenar otras variables de secuencia.

Los bucles for comienzan con una sentencia {% for %} y terminan con una sentencia {% endfor %} . Dentro de la sentencia {% for %} se nombra un solo elemento de la secuencia seguido de in y luego el nombre de la secuencia. El código entre las sentencias for de apertura y cierre se imprime con cada iteración, y generalmente incluye la variable impresa del elemento individual de la secuencia. A continuación se muestra la sintaxis básica de un bucle for:

{% for item in items %} {{ item }} {% endfor %}
A continuación se presenta un ejemplo básico que muestra cómo imprimir una secuencia de valores de variables en una lista.
{% 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>

Propiedades del bucle

A medida que un bucle itera, puedes utilizar la lógica condicional para definir el comportamiento del bucle. La propiedad variable loop.index mantiene una cuenta del número actual de las iteraciones del bucle. Hay otras propiedades de las variables de bucle que cuentan las iteraciones de diferentes maneras. Estas propiedades se describen a continuación:
VariableDescription
loop.cycle

Una función de ayuda para recorrer una lista de secuencias. Consulta la explicación más abajo.

loop.depth

Indica la profundidad de un bucle recursivo en la que se encuentra la renderización. Comienza en el nivel 1

loop.depth0

Indica la profundidad de un bucle recursivo en la que se encuentra la renderización. Comienza en el nivel 0

loop.first

Esta variable se evalúa como verdadera, si es la primera iteración del bucle.

loop.index

La iteración actual del bucle. Esta variable empieza a contar en 1.

loop.index0

La iteración actual del bucle. Esta variable empieza a contar en 0.

loop.last

Esta variable se evalúa como verdadera, si es la última iteración del bucle.

loop.length

El número de elementos en la secuencia.

loop.revindex

El número de iteraciones desde el final del bucle. Cuenta regresiva hasta 1.

loop.revindex0

El número de iteraciones desde el final del bucle. Cuenta regresiva hasta 0.

A continuación se muestran algunos ejemplos que utilizan diferentes variables de bucle. El siguiente ejemplo básico utiliza loop.index para mantener una cuenta que se imprime con cada iteración.

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

El siguiente ejemplo utiliza la lógica condicional para comprobar si la longitud del bucle es divisibleby ciertos números. A continuación, se renderiza la anchura del div de post-item en consecuencia. El ejemplo utiliza el bucle estándar de post de blog y asume que hay 6 posts en el bucle.

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

Bucles anidados

Los bucles también pueden anidarse con bucles. El bucle for secundario se ejecutará con cada iteración del bucle for principal. En el siguiente ejemplo, se imprime una lista de elementos secundarios en un <ul> anidado dentro de un <ul> de elementos principales.

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

La etiqueta cycle puede utilizarse dentro de un bucle for para recorrer una serie de valores de cadena e imprimirlos en cada iteración. Una de las aplicaciones más prácticas de esta técnica es aplicar la alternancia de clases a los posts de tu blog en un listado. Esta etiqueta puede utilizarse en más de dos valores y repetirá el ciclo si hay más iteraciones del bucle que valores del ciclo. En el ejemplo siguiente, se aplica una clase odd y even a los posts de un listado (el ejemplo supone que hay 5 posts en el bucle)  

Ten en cuenta que no hay espacios entre los valores de la cadena de ciclos separados por comas.

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

Variables dentro de los bucles

Cualquier variable definida dentro de los bucles está limitada al ámbito de ese bucle y no puede ser llamada desde fuera del mismo.

Puedes llamar a las variables definidas fuera de un bucle, desde dentro de un bucle, pero no a la inversa.

Pares clave y valor en los bucles

Si el diccionario de información que está recorriendo tiene pares clave y valor, un simple bucle for solo tendría acceso a los valores. Si deseas tener acceso tanto a las claves como a los valores dentro del bucle for, el HubL se formatearía así:

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

Iterar un número determinado de veces

A veces se quiere iterar un número determinado de veces, esto puede ser útil para generar HTML o CSS. Puedes hacerlo con la función de rango.

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

Uso de las etiquetas HubL en los bucles

Cuando agregas una etiqueta a la página HubSpot asignas automáticamente un id al HTML que la envuelve. Esta etiqueta es única por su "nombre". En situaciones en las que se necesita utilizar una etiqueta en un bucle for, establecer nombres únicos no es práctico. Agrega el parámetro unique_in_loop a tu etiqueta para generar identificadores únicos. Este parámetro agrega el nombre del módulo con el número de iteración del bucle actual, asegurando que es único. Los identificadores únicos no solo son necesarios para un HTML válido, sino que son importantes para la accesibilidad.

{% for item in module.icon_field %} {% icon name="{{ item.name }}", style="{{ item.type }}", unicode="{{ item.unicode }}", unique_in_loop=True %} {% endfor %}
¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.