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

Question

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

    -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 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>

Can multiple div elements with different class names be looped in jade or other html preprocessors?