如何使用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爲列表中的每個第一，第二，第三個帖子設置顏色？

回答

相關問題