flask - Jinja2：每3个项目创建新行

Question

目前，对于文章中的每篇文章，都会创建一个带有 span4 类的新 div。相反，对于每一行，我想将其内容限制为三个跨度，并在达到该限制后创建一个新行。我怎样才能最好地实现这一点？

{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
  <legend></legend>
  <div class="row-fluid" id="main">
      {% for article in articles %}
      <div class="span4">
          <div class="thumbnail">
              <a href="{{ article.url }}"><img src="http://placehold.it/300x150/483CB4"></a>
              <div class="caption">
                  <h4><a href="{{ article.url }}">{{ article.title }}</a></h4>
                  <p> {{ article.summary }}</p>
              </div>
              <legend></legend>
              <a class="btn" href="#"><i class="icon-thumbs-up"></i></a>
              <a class="btn" href="#"><i class="icon-thumbs-down"></i></a>
          </div>
      </div>
      {% endfor %}
  </div>
</div>
{% endblock %}

目标：

<div class="row">
  <div class="span4">article[0]</div>
  <div class="span4">article[1]</div>
  <div class="span4">article[2]</div>
</div>
<div class="row">
  <div class="span4">article[3]</div>
  <div class="span4">article[4]</div>
  <div class="span4">article[5]</div>
</div>

Answer 1

最好的方法是使用内置batch过滤器将您的列表分成三组：

{% for article_row in articles | batch(3, ' ') %}
<div class="row">
    {% for article in article_row %}
    <div class="span4">{{ article }}</div>
    {% endfor %}
</div>
{% endfor %}

Answer 2

您可以在循环内使用loop.index0and 。这是for 循环文档。loop.lastfor

例子：

{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
  <legend></legend>
  <div class="row-fluid" id="main">
      {% for article in articles %}
      {% if loop.index0 % 3 == 0 %}
      <div class="row">
      {% endif %}
          <div class="span4">
              ...
          </div>
      {% if loop.index0 % 3 == 2 or loop.last %}
      </div>
      {% endif %}
      {% endfor %}
  </div>
</div>
{% endblock %}

loop.last即使少于 3 个项目，该子句也应关闭最后一行。<div>应该在loop.index0给出 0 作为余数时开始，应该在 2 是余数时结束

另一种选择是将项目分组到行中，然后再将它们传递到模板中，然后您只需发出两个 for 循环，一个在另一个中。