Как заполнить два разных столбца с помощью одного цикла for

У меня есть объект, я хочу просмотреть объект и заполнить страницу с двумя колонками. Я не знаю, как разделить объект на две колонки. Если я сделаю div в цикле для каждого элемента, они просто будут друг под другом.

{% for listing in listings %}
<div id="listing" class="mb-4 col-md-5 col-sm-3 align-items-center">
        <a href="{% url 'item' listing.item %}">
        <div class="row">
            <div class="itemImage col-md-2 col-sm-1">
                <img id="itemImage" class="w-100" src="{% if listing.image %}{{listing.image}}{% else %}{{'https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg'}}{% endif %}">
            </div>
            <div id="content" class="col-md-10 col-sm-11">
                <h3 id="title">Item: {{listing.item}}</h3>
                <p id="description">Description: {{listing.description}}</p>
                <p id="startingbid">Current Price: {{listing.currentprice}}$</p>
            </div>
        </div>
        </a>
    </div>
    {%empty%}
    <p id="nolisting">No items on auction yet.</p>
{% endfor %}

это то, что я хочу, но я хочу, чтобы была новая карта слева, когда счетчик forloop нечетный, и одна справа, когда счетчик forloop четный, например

<div class="container-fluid">
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
</div>

Фактически, этого можно добиться с помощью пользовательского фильтра.

  • перейдите в папку вашего приложения, содержащую такие файлы: "views.py", "urls.py", etc
  • .
  • затем, создайте новую папку, которая называется "templatetags"
  • добавьте в нее файл init.py и затем вы можете создать свой собственный файл py, назовем его "even_odd.py"
  • добавьте в него эти несколько строк кода.

from django import template

register = template.Library()

@register.filter()
def mod(value):
    number = int(value)
    if number % 2 == 0:
        return "even"
    return "odd"

тогда, в вашем HTML файле, вы можете фильтровать по этой функции следующим образом:

  • поместите созданный вами файл поверх целевого файла следующим образом:

    {% load even_odd %}

тогда вы можете использовать такой псевдокод:

{% for listing in listings %}
{% with name=forloop.counter|mod %}
{% if name == "even" %}
<div id="listing" class="mb-4 col-md-5 col-sm-3 align-items-center">
        <a href="{% url 'item' listing.item %}">
        <div class="row">
            <div class="itemImage col-md-2 col-sm-1">
                <img id="itemImage" class="w-100" src="{% if listing.image %}{{listing.image}}{% else %}{{'https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg'}}{% endif %}">
            </div>
            <div id="content" class="col-md-10 col-sm-11">
                <h3 id="title">Item: {{listing.item}}</h3>
                <p id="description">Description: {{listing.description}}</p>
                <p id="startingbid">Current Price: {{listing.currentprice}}$</p>
            </div>
        </div>
        </a>
    </div>
    {% else %}
        # do something else
    {% endif %}
    {% endwith %}
    {%empty%}
    <p id="nolisting">No items on auction yet.</p>
{% endfor %}

эта операция была проверена мной

В шаблоне

{% block body %}
    <div class="container-fluid">
        <div class="row g-1">
            {% for listing in myvar %}
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}
  • Вы выполняли цикл вне строки, но вам нужно выполнить цикл внутри цикла и создать столько столбцов, сколько данных в listings.
  • Я пробовал это, это работает.
Вернуться на верх