2013-07-22 10 views
12

Şu anda makalede her makale için span4 sınıfına sahip yeni bir div oluşturuldu. Her satır için bunun yerine içeriği üç span ile sınırlamak ve o sınıra ulaşıldığında yeni bir satır oluşturmak istiyorum. Bunu en iyi nasıl uygulayabilirim?Jinja2: Her 3 öğe için bir satır oluşturun

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

Hedef:

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

cevap

19

Bunu yapmanın en iyi yolu, üç gruba listenizi kırmaya batch filter inşa kullanmaktır:

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

aradığım Tam olarak ne. Tüm Jinja2 belgelerini okudum. Teşekkürler. – cryptojuice

+0

Merhaba, harika bir çözüm, ne ilk satırda 3 element olarak göstermek istiyorum, ikinci sıradaki 4elements, yine 3. sıradaki 3 element, 4. sıradaki 4 element, alternatif olarak. –

+0

O zaman filtrenizin kendi versiyonuna ihtiyacınız var - yazı yazmak o kadar da zor değil, fakat bu yorumun kenar boşluğu kodu içermek için çok küçük. Şimdiye kadar sahip olduğunuz bir başka soru yazın. :-) –

4

Sen for döngü içinde loop.index0 ve loop.last kullanabilirsiniz. İşte for-loop documentation.

Örnek:

{% 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 fıkra az 3 ürün olsaydı bile son satırı kapatmalıdır. <div>loop.index0 kalanı olarak 0 verdiğinde başlamalı ve 2 şablonuna iletmeden önce satırlara ürün, o zaman sadece iki verebilir

diğer alternatif grubuna olurdu kalan olduğunda iç içe döngüler for-bitmeli diğeri.