请教loop里如何单独定义某条数据的样式

Question

如图，我想制作这么一个类似metro样式的效果，代码里需要给数据单独定义样式，我使用的是开源程序，模板里是直接使用loop输出循环结果的，请问如何才能给loop里数据单独定义样式？ 或者是能单独输出loop里的某条数据也可以啊，请帮帮忙，谢谢啦。

Answer 1

在 loop 循环中为单独的数据定义样式，你可以使用条件标签或者在循环的过程中计数器来控制样式。

---

例如，如果你希望给奇数和偶数行分别定义不同的样式，可以使用条件标签：

{% for item in items %}
  {% if loop.index is odd %}
    <div class="odd-row">{{ item }}</div>
  {% else %}
    <div class="even-row">{{ item }}</div>
  {% endif %}
{% endfor %}

如果你希望给每隔几项定义不同的样式，可以使用计数器：

{% for item in items %}
  {% if loop.index0 % 3 == 0 %}
    <div class="special-row">{{ item }}</div>
  {% else %}
    <div>{{ item }}</div>
  {% endif %}
{% endfor %}

还有一种方法是使用 filter，你可以使用内置的 divisibleby filter 来控制样式：

{% for item in items %}
  {% if loop.index0 is divisibleby 3 %}
    <div class="special-row">{{ item }}</div>
  {% else %}
    <div>{{ item }}</div>
  {% endif %}
{% endfor %}

如果你希望单独输出 loop 中的某条数据，你可以在循环中使用 break 关键字来终止循环，然后在循环外部输出需要的数据。

例如：

{% for item in items %}
  {% if item.special %}
    {{ item }}
    {% break %}
  {% endif %}
{% endfor %}

上面的代码会找到第一个 special 属性为 true 的数据，然后输出它，并终止循的循环。

---

另外，如果你想要输出 loop 中的所有特殊数据，你可以使用 continue 关键字跳过不需要的数据：

{% for item in items %}
  {% if not item.special %}
    {% continue %}
  {% endif %}
  {{ item }}
{% endfor %}

上面的代码会输出 loop 中所有的特殊数据。