多个类名不同的 div 元素可以在 jade 或其他 html 预处理器中循环吗？

Question

A list of different div elements with same class name can be written briefly with the help of jade preprocessor like :

 -var num = 4 while num-- .c

which is equivalent to in html :

 <div class="c"> </div> <div class="c"> </div> <div class="c"> </div> <div class="c"> </div>

Is there any way to generate the list of different div elements with different class names with the help of some other loop functions in Jade or Haml or Markdown or Slim or any other html preprocessor.

 <div class="c1"> </div> <div class="c2"> </div> <div class="c3"> </div> <div class="c4"> </div>

Answer 1

Yes. In Jade you could do it like this:

- var num=1
while num <= 4
  div(class="c#{num++}")

Or you could put your classnames in an array and do it like this:

- var arr = ['c1','c2','c3','c4']
each i in arr
  div(class=i)

Both ways will give you the output of:

<div class="c1"> </div>
<div class="c2"> </div>
<div class="c3"> </div>
<div class="c4"> </div>