【Pug】classやsrcなど属性の中身に連番をつける方法【1分】

こんにちは!のせっち@nosecchi01です!

Pugを使って、class名やimg(src=)など属性の中身に連番を付ける方法を解説します。

解説(コピペ化)

for文を回して、class名、img(src)の中身でindex番号を順番に付与します。

下記のように記述します。

- for (var i = 0; i < 3; i++)
div(class=`item0${i + 1}`)
  img(src=`./img/img-hoge0${i + 1}.jpg`)

htmlの出力結果は下記です。

<div class="item01">
  <img src="./img/img-hoge01.jpg">
</div>
<div class="item02">
  <img src="./img/img-hoge02.jpg">
</div>
<div class="item03">
  <img src="./img/img-hoge03.jpg">
</div>

通常は#{i}を使いますが、属性値の中で使う場合は、バッククオート(`)で囲み、#{i}の代わりに${i}とすればOKです!

参考

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
- WordPressが得意!
- 初心者向けGulp教材は購入者100部以上!