Jinja2：每3个项目创建一个新行 [英] Jinja2: Create new row for every 3 items

问题描述

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


$ b

{％extends base.html％}
{％block content％}
< div class =container-fluid>
<图例>< /图例>
< div class =row-fluidid =main>
{％对于文章中的文章％}
< 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>
<图例>< /图例>
< a class =btnhref =＃>< i class =icon-thumbs-up>< / i>< / a>
< a class =btnhref =＃>< 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>


解决方案

最好的方法是使用built在 批处理过滤器中将您的列表分组三：

  {％article_row in articles |批次（3，'& nbsp;'）％} 
< div class =row> 
 {％为article_row％中的文章} 
< div class =span4> {{article}}< / div> 
 {％endfor％} 
< / div> 
 {％endfor％} 
  

Currently for every article in articles a new div with class span4 is created. Instead for each row I would like to limit it's content to three span's and create a new row once that limit has been reached. How can I best implement this?

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

Goal:

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

解决方案

The best way to do this is to use the built in batch filter to break up your list into groups of three:

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

这篇关于Jinja2：每3个项目创建一个新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！