文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

jstlの<c:forEach>で<ul><li>hoge</li></ul>のブロックを綺麗に出力する

わかりにくっ!


f:id:treeapps:20180426142529p:plain

解りにくいかもしれないので、早速やりたいことを書いてみます。

やりたいこと

Actionでリストを生成し、jspにリストを渡す。
そのリストを以下のように3列づつ<ul>と<li>を使って出力したい。
但しリストの要素数は不定で、<li>が1個になってしまう場合がある。
リストの要素数が7件の場合、以下のように出力したい。

<ul>
<li>111</li><li>222</li><li>333</li>
</ul>
<ul>
<li>111</li><li>222</li><li>333</li>
</ul>
<ul>
<li>111</li>
</ul>

サンプルソース

<c:forEach var="item" items="${items}" varStatus="itemStatus">
<c:if test="${itemStatus.first || itemStatus.index % 3 == 0}">
<ul>
</c:if>
<li>${item.name}</li>
<c:if test="${itemStatus.last || itemStatus.count % 3 == 0}">
</ul>
</c:if>
</c:forEach>

varStatusの暗黙プロパティである、firstlast剰余を使うと綺麗に確実に書けます。
3の数値を変更すると、<li>の数を任意に変更できます。

first、last、剰余を上手く使う事で、jspの中で数を数えるために<c:set>しまくって汚いソースにならずにスッキリ書く事ができます。

非常に簡単なお話でしたが、忘れないように備忘録として残しておきます。