在 JADE 中以父子 div 为条件

Question

这是我的实际代码：

each val, index in array
  if (index%3 == 0)
    .parent
  .child

或者这个：

each val, index in array
  if (index%3 == 0)
    .parent
      .child
  else
      .child

我想要的是，如果条件为真，则添加块父级 .row，当条件不为真时，在父级中添加子级。最终目标是拥有以下代码：

 <div class='row'>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
 </div>
 <div class='row'>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
 </div>

但是我目前使用实际代码的代码是：

 <div class='row'></div>
 <div class='child'></div>
 <div class='child'></div>
 <div class='child'></div>
 <div class='row'></div>
 <div class='child'></div>
 <div class='child'></div>
 <div class='child'></div>

我尝试了许多不同的缩进，但没有任何效果，每次我在条件中写入父项时，块都会自动关闭，我不知道如何保持打开状态，或者重新打开它以将内容放入其中。

Answer 1

Jade 旨在使结束标签变得容易。由于这个原因，不幸的是，在这种情况下无法手动控制何时关闭标签。

因此，AFAICS，您有两个选择：1. 将数组更改为适合 Jade 工作流程的内容，或 2. 使用管道文本手动设置开始和结束标记。

转换数组

像这样的事情会起作用：

//- You might want to put the `paired` array generation in your
//- main server file instead of the Jade template
- var paired = []
- array.forEach(function (element, index) {
-   if (index % 3 === 0) {
-     paired.push([element])
-   } else {
-     paired[paired.length - 1].push(element)
-   }
- })

each row in paired
  .row
    each val in row
      .child

手动控制标签结尾

each val, index in array
  if (index % 3 === 0)
    | <div class="row">
  .child
  if (index % 3 === 2 || index === array.length - 1)
    | </div>

诚然，这两种方式都不是非常漂亮，但总比没有好，对吧？