17

我正在创建一个目录,其中有一个未定义长度的项目列表。我想把它吐出来,每行有三列。所以我有以下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 模板感到困惑?如何拆分它以便在三个项目之后开始新行?

4

4 回答 4

43

尝试这样的事情:

<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>
于 2012-10-24T11:19:46.067 回答
5

您可以尝试创建一个自定义模板过滤器,该过滤器将返回3-items 列表

快速尝试:

@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 %}
于 2012-10-24T11:21:29.963 回答
4

您可以使用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 %}
于 2012-10-24T11:23:40.673 回答
1

抱歉,没有足够的声誉来评论jpic的答案(已接受的答案),对于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>

细节在这里

于 2017-06-17T06:05:25.810 回答