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

# Bucles for

> Los bucles for se pueden utilizar en HubL para iterar a través de secuencias de objetos. 

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](/cms/start-building/building-blocks/templates/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:

```hubl theme={null}
{% 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.

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

## Propiedades del bucle

A medida que un bucle itera, puedes utilizar la [lógica condicional](/cms/reference/hubl/if-statements) 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:

| Variable         | Description                                                                                                 |
| ---------------- | ----------------------------------------------------------------------------------------------------------- |
| `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.

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

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.

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

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

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

<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 dentro de los bucles

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

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

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

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

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

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

## 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](/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 %}
```