Как заполнить два разных столбца с помощью одного цикла 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. - Я пробовал это, это работает.