Pug迭代元素嵌套

时间:2020-09-23 11:20:49

标签: html iteration pug

我想知道是否有一种方法可以使用pug迭代无限嵌套html元素。我唯一想到的是标记的依赖迭代计数器的缩进。但是我什至不确定这是否可能。有人知道是否有办法吗?

这里有一个澄清的例子:

以下哈巴狗标记

div
  div 
    div
      div
        div

将导致以下html

<div>
  <div>
    <div>
      <div>
        <div>
        </div>
      </div>
    </div>
  </div>
</div>

即使我们有10000个这样的嵌套元素,这也是我试图使用迭代或pug来保持代码较小的目的。

最诚挚的问候

1 个答案:

答案 0 :(得分:1)

您可以使用递归mixin来嵌套n个元素:

mixin nest(n)
  div
    if n-- > 1
      +nest(n)

+nest(10)

它将编译为:

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>