How to set color of every 1st, 2nd, 3rd post in a list with Flask?

Question

I'm using Flask web framework with bootstrap, and for my enumeration of posts, I have a for each (post) in (posts) loop outputting the code for each post.

I want to make every 1st post one color, every 2nd post another, etc.

My instinctive approach is to declare an integer before the loop at 1 and then mod 3 that integer to decide which color to make the post, and then increment the integer.

However, Flask won't let me declare just an integer i = 0 like so

{{ i = 0 }}

That's probably glaringly wrong to people here, but I don't exactly get what kinds of things I can do with {{ }}.

Can anyone tell me if my approach is completely off and there is another easier way to do this, or what I am I doing wrong with my approach?

^ This, pretty much. Do this with CSS. Don't get your Framework involved. — Two-Bit Alchemist, Nov 03 '15 at 22:28
Also, although we've agreed that this is the *wrong* way to do things ... instead of manually incrementing a counter, you can use `{{ loop.index }}` (or `{{ loop.index0 }}` to access the loop counter without having to maintain one yourself — donkopotamus, Nov 05 '15 at 09:42

score 2 · Accepted Answer · edited May 23 '17 at 12:29

2

If you want to style, just use CSS.

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

and

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

For reference, review this question and its answers for examples with nth-child and this answer as the highest-rated nth-child answer.

edited May 23 '17 at 12:29

Community

1
1

answered Nov 03 '15 at 22:31

Celeo

5,583
8
39
41

Awesome. Much better than my approach. Thanks! – Alex Nov 03 '15 at 22:38

score 2 · Answer 2 · answered Nov 03 '15 at 22:36

This is best done using the CSS selector nth-child. Use something like:

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

Lists with class="striped" will now use three colours.

score 1 · Answer 3 · answered Nov 04 '15 at 09:22

I'll add this for the sake of completeness. This isn't the only case where you might want to keep a counter from inside your template and although you're correct that {{ }} won't let you set a variable, Flask (jinja2) will allow you to use {% set = %}. As a result, you can achieve your desired result using the template system to conditionally assign classes and styling based on the resulting class names. E.g, to alternate between red and green rows:

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

This has the benefit of being IE8 compatible, though that's a very minor advantage nowadays. The main take-away point is that you can set variables in your template and there may be other cases where it can make sense to.

How to set color of every 1st, 2nd, 3rd post in a list with Flask?

3 Answers3