Jinja2: создать новую строку для каждых 3 элементов

В настоящее время для каждой статьи в статьях создается новый div с классом span4. Вместо этого для каждой строки я хотел бы ограничить ее содержимое тремя диапазонами и создать новую строку после достижения этого предела. Как я могу лучше всего реализовать это?

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

flask jinja2
person cryptojuice    schedule 22.07.2013    source источник

Ответы (2)


arrow_upward
44
arrow_downward

Лучший способ сделать это — использовать встроенный batch фильтр, чтобы разбить список на группы по три :

{% for article_row in articles | batch(3, '&nbsp;') %}
<div class="row">
    {% for article in article_row %}
    <div class="span4">{{ article }}</div>
    {% endfor %}
</div>
{% endfor %}
person Sean Vieira    schedule 23.07.2013
comment
Именно то, что я искал. Я лучше прочитаю всю документацию Jinja2. Спасибо. - person cryptojuice; 23.07.2013
comment
Привет, отличное решение, что, если я хочу показать как 3 элемента в первой строке, 4 элемента во второй строке, снова 3 элемента в 3-й строке, 4 элемента в 4-й строке, как альтернативу. - person Rinsen S; 23.11.2017
comment
Тогда вам понадобится собственная версия фильтра — написать ее не так уж и сложно, но поля этого комментария слишком малы, чтобы вместить код. Напишите еще вопрос, с тем, что у вас есть до сих пор. :-) - person Sean Vieira; 26.11.2017

arrow_upward
6
arrow_downward

Вы можете использовать loop.index0 и loop.last внутри цикла for. Вот документация по циклу for.

Пример:

{% 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 один внутри другого.

person Miguel    schedule 23.07.2013