如何用一个for循环填充两个不同的列

Question

我有一个对象，我想遍历该对象并用两列填充一个页面我不知道如何将对象分成两列。如果我在循环中为每个项目制作一个 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 计数为奇数时左侧有一张新卡，当 forloopcount 为偶数时右侧有一张新卡

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

Answer 1

实际上，您可以使用自定义过滤器来实现。

转到包含这些文件的应用程序文件夹：“views.py”、“urls.py”等
然后，创建一个名为“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 %}

此操作已被我测试

Answer 2

在模板中

{% 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 中的数据一样多的列。
我试过了，很管用。

如何用一个for循环填充两个不同的列

how to populate two different columns with one for loop

django

django-templates

在模板中