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

Question

在jade预处理器的帮助下，可以简单地写出具有相同类名的不同div元素的列表，如：

    -var num = 4
     while num--
     .c

相当于html：

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

有没有办法在Jade或Haml或Markdown或Slim或任何其他html预处理器的其他循环函数的帮助下生成具有不同类名的不同div元素的列表。

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

Answer 1

是。在Jade，你可以这样做：

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

或者你可以把你的类名放在一个数组中并按照这样做：

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

两种方式都会给你输出：

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