奇/偶记录具有独特的CSS类

Question

使用螺栓，我想抓住我的4个最新条目。很简单。但是，我需要第一个和第三个条目在他们周围有一个特定的CSS类，而第二个和第四个条目将有他们自己的类。

最终的HTML应该是这个样子：

<div class="quarter alt"> 
     <h3><a href="{{ record.link }}">{{ record.title }}</a></h3> 
     <p>{{ record.teaser }}</p> 
     <p><a href="{{ record.link }}">Read more</a>.</p> 
    </div> 
    <div class="quarter"> 
     <h3><a href="{{ record.link }}">{{ record.title }}</a></h3> 
     <p>{{ record.teaser }}</p> 
     <p><a href="{{ record.link }}">Read more</a>.</p> 
    </div> 
    <div class="quarter alt"> 
     <h3><a href="{{ record.link }}">{{ record.title }}</a></h3> 
     <p>{{ record.teaser }}</p> 
     <p><a href="{{ record.link }}">Read more</a>.</p> 
    </div> 
    <div class="quarter"> 
     <h3><a href="{{ record.link }}">{{ record.title }}</a></h3> 
     <p>{{ record.teaser }}</p> 
     <p><a href="{{ record.link }}">Read more</a>.</p> 
    </div> 

我与片段和文档玩耍了和我在那里我找到了点loop.first但当然，仅适用于第一个条目：

{% setcontent records = "entries/latest/4" %} 
{% for record in records %} 

{% if loop.first %} 
    <div class="quarter alt"> 
     <h3><a href="{{ record.link }}">{{ record.title }}</a></h3> 
     <p>{{ record.teaser }}</p> 
     <p><a href="{{ record.link }}">Read more</a>.</p> 
    </div> 
{% else %} 
    <div class="quarter"> 
     <h3><a href="{{ record.link }}">{{ record.title }}</a></h3> 
     <p>{{ record.teaser }}</p> 
     <p><a href="{{ record.link }}">Read more</a>.</p> 
    </div> 
{% endif %} 
{% endfor %} 

任何想法如何编辑我的模板来完成我后？非常感谢。

Answer 1

您可以使用CSS :nth-child selector

例子：

.quarter:nth-child(odd) { 
    /* CSS for row 1 & 3 */ 
} 

.quarter:nth-child(even) { 
    /* CSS for row 2 & 4 */ 
} 

（@ruffp，感谢您的反馈）

Answer 2

您可以使用树枝在循环使用loop.index或loop.index0变量

{% setcontent records = "entries/latest/4" %} 
{% for record in records %} 
    {% if loop.index is odd %} 
     <div class="quarter"> 
      {{ loop.index }} odd stuff 
     </div> 
    {% else %} 
     <div class="quarter alt"> 
      {{ loop.index }} even stuff 
     </div> 
    {% endif %} 
{% endfor %} 

欲了解更多信息，你可以看看http://twig.sensiolabs.org/doc/tags/for.html和http://twig.sensiolabs.org/doc/tests/odd.html