Строки шаблонов django нескольких элементов

Я создаю каталог, в котором есть список элементов неопределенной длины. Я хочу выплюнуть его рядами по три столбца каждый. Итак, у меня есть следующий html:

<div class="row">
    <div class="three columns">item 1
    </div>
    <div class="three columns">item 2
    </div>
    <div class="three columns">item 3
    </div>
</div>
<div class="row">
    <div class="three columns">item 4
    </div>
    <div class="three columns">item 5
    </div>
    <div class="three columns">item 6
    </div>
</div>

Я зациклился на том, как я могу реализовать это как шаблон django? Как я могу разбить его так, чтобы новая строка начиналась после трех элементов?

Ответы

Ответ 1

Попробуйте что-то вроде этого:

<div class="row">
{% for item in items %}
    <div class="three columns">{{ item }}
    </div>
    {% if forloop.counter|divisibleby:3 %}
</div>
<div class="row">
    {% endif %}
{% endfor %}
</div>

Ответ 2

Вы можете попытаться создать настраиваемый фильтр шаблонов, который вернет список из 3-х элементов.

Быстрая попытка:

@register.filter
def splitByThree(data):
    return [l[i:i+3] for i in range(0, len(l), 3)]

И затем в вашем шаблоне:

{% load splitByThree %}

{% for list in data|splitByThree %}
<div class="row">
{% for item in list %}
<div class="three columns">{{ item }}</div>
{% endfor %}
</div>
{% endfor %}

Ответ 3

Вы можете использовать переменную forloop.counter и divisibleby фильтром. Код будет близок к этому:

{% for item in items %}
    {% if forloop.first %}
        <div class="row">
    {% endif %}
    <div class="three columns">{{ item }}</div>
    {% if forloop.counter|divisibleby:"3" %}
        </div>
        {% if not forloop.last %}
            <div class="row">
        {% endif %}
    {% endif %}
    {% if forloop.last %}
         </div>
    {% endif %}
{% endfor %}

Ответ 4

Извините, у меня недостаточно репутации, чтобы просто комментировать jpic answer (принятый), для Jinja2, используйте:

<div class="row">
{% for item in items %}
    <div class="three columns">{{ item }}
    </div>
    {% if loop.index is divisibleby(3) %}
</div>
<div class="row">
    {% endif %}
{% endfor %}
</div>

подробности здесь.