BLOG TOP

Django: クラス名を交互に付与する方法

2010年3月21日

HTMLを記述する場合に、

    <div class="odd"></div>
    <div class="even"></div>
    <div class="odd"></div>
    <div class="even"></div>
    ...


などと、クラス名を交互に切り替えたい場合があります。 このような場合、Djangoならばテンプレートフィルタの「cycle」を使って簡単に実現できます。

「cycle」は、繰り返す対象となる文字列をスペース区切りで指定します。 具体的には以下のようにfor文の中で記述します。

1
2
3
4
5
6
7
{% for enum in enums %}
    <div class="box-{% cycle "odd" "even" %}">

        ...

    </div>
{% endfor %}

これにより、box-odd, box-evenが交互にdivのクラス名として付与されるようになります。ちなみに、cycleの引数の数は可変で、{% cycle "a" "b" "c" %}とすると、a -> b -> c -> a -> ...という循環になります。