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

2010/03/21

HTMLを記述する場合に、

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

などと、クラス名を交互に切り替えたい場合があります。

このような場合、Djangoならばテンプレートフィルタの「cycle」を使って簡単に実現できます。

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

    {% 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 -> ...という循環になります。

blog comments powered by Disqus
カテゴリー