如何使用Flask为列表中的每个第一，第二，第三个帖子设置颜色？

我使用Flask的web框架与引导，并为我的枚举的职位，我有每个（职位）在（职位）循环输出每个职位的代码。如何使用Flask为列表中的每个第一，第二，第三个帖子设置颜色？

我要尽第一后一种颜色，每2后另一个等

我本能的做法是在1申报循环前的整数，然后国防部3是整数，以决定要哪种颜色该帖子，然后递增整数。

然而，瓶不会让我声明只是一个整数i = 0，像这样

{{ i = 0 }}

这可能是错得离谱这里的人，但我不完全得到我可以做什么样的事情与{{}}。

任何人都可以告诉我，如果我的方法完全关闭，还有另一种更简单的方法来做到这一点，或者我做错了我的方法？

来源

2015-11-03 Alex

http://www.w3schools.com/cssref/sel_nth-child.asp – Celeo

^这个，差不多。用CSS做这件事。不要让你的框架参与。 –

此外，尽管我们已经认为这是做错事情的方式......而不是手动递增计数器，您可以使用'{{loop.index}}'（或'{{loop.index0} }'进入循环计数器而不必自己维护一个 – donkopotamus

如果你想要的风格，只需使用CSS。

<style type="text/css"> 
    ul li:nth-child(2) { 
     background-color: grey; 
    } 
</style>

和

<ul> 
{% for item in list %} 
    <li>{{ item }}</li> 
{% endfor %} 
</ul>

仅供参考，检讨this question and its answers与nth-child和this answer作为收视率最高的nth-child回答样本。

来源

2015-11-03 22:31:28 Celeo

太棒了，比我的方法好多了。谢谢！ – Alex

这最好使用CSS选择器nth-child完成。使用类似于：

ul.striped li:nth-child(3n + 0) { 
    background: red; 
} 

ul.striped li:nth-child(3n + 1) { 
    background: blue; 
} 

ul.striped li:nth-child(3n + 2) { 
    background: yellow; 
}

与class="striped"列表将使用三种颜色。

来源

2015-11-03 22:36:42 donkopotamus

为了完整起见，我会添加它。这不是唯一的情况，您可能希望在模板内部保留一个计数器，尽管{{}}不会让您设置变量，但是正确的，Flask（jinja2）将允许您使用{％} set =％}。因此，您可以使用模板系统根据生成的类名称有条件地分配类和样式，从而实现您想要的结果。 E.g，以红色和绿色行之间交替：

{% set count = 0 %} 
{% for i in my_list %} 
    {% if count % 2 %} 
    <li class="odd"> 
    {% else %} 
    <li class="even"> 
    {% endif %} 
    {{ i }} 
    </li> 
    {% set count = count + 1 %} 
{% endfor %}

CSS：

li.odd{ background-color: #f00; } 
li.even{ background-color: #0f0; }

这具有IE8兼容的好处，虽然这是一个非常小的优势如今。主要的问题是您可以在模板中设置变量，并且可能有其他情况下可以使用它。

来源

2015-11-04 09:22:01

啊非常有帮助谢谢。 – Alex

如何使用Flask为列表中的每个第一，第二，第三个帖子设置颜色？

回答

相关问题