es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo recorrer varios elementos en una plantilla de Django

01 Aug, 2023 Programación

¿Cómo puedo recorrer elementos en una plantilla de Django de la siguiente manera?

{% for brand in categories %}
    <div class="brand-col">
        <figure class="brand-wrapper">
            <img src="{{brand.product_feature_image.image.url}}" alt="Marca" width="410" height="186">(item1)
        </figure>
        <img src="{{brand.product_feature_image.image.url}}" alt="Marca" width="410" height="186">(item2)
    </div>
{% endfor %}


<div class="brand-col">
    <figure class="brand-wrapper">
        <img src="{{brand.product_feature_image.image.url}}" alt="Marca" width="410" height="186">(item3)
    </figure>
    <img src="{{brand.product_feature_image.image.url}}" alt="Marca" width="410" height="186">(item4)
</div>

<div class="brand-col">
    <figure class="brand-wrapper">
        <img src="{{brand.product_feature_image.image.url}}" alt="Marca" width="410" height="186">(item5)
    </figure>
    <img src="{{brand.product_feature_image.image.url}}" alt="Marca" width="410" height="186">(item6)
</div>

Referencia: (el número del ítem dentro del paréntesis es solo referencial)
Aquí, primero quiero recorrer 1 y 2 en la etiqueta <figure>, y luego quiero volver a recorrer toda la etiqueta <div> y los ítems 3 y 4 dentro de <figure>.

Intenté usar el ciclo, pero no tuve suerte. Cualquier ayuda será muy apreciada.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr la estructura de bucle deseada, puedes usar bucles for anidados en la plantilla de Django. Así es como se hace:

    {% for brand in categories %}
<div class="brand-col">
    {% for item in brand.items %}
    <figure class="brand-wrapper">
        <img src="{{ item.product_feature_image.image.url }}" alt="Marca" width="410" height="186">
    </figure>
    {% endfor %}
</div>
{% endfor %}

    Suponiendo que cada objeto brand en la lista categories tiene una lista anidada de items, este código recorrerá cada marca y luego recorrerá los elementos dentro de cada marca, generando la estructura HTML correspondiente.

    Asegúrate de que tu objeto categories esté correctamente estructurado con listas anidadas de items para que esto funcione correctamente.

Comments are closed.