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

诚然，这两种方法都不是很漂亮，但总比没有好吧？

Answer 2

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

Answer 3

这可能有点晚了，但可能有人像我一样仍在寻找答案。正如蒂莫西所说，改造阵列是唯一的方法。如果你要明确地使用 html 为什么要使用像哈巴狗这样的模板系统..但是，Timothy 推荐的不是使用纯粹的 javascript 方法我发现使用 mixins 更方便，因为如果你只是使用 javascript 然后在将其传递到模板系统之前更改数据结构。

所以这是我的 mixin 函数（注意可能错误的选项卡，正确设置它们至关重要）：

mixin nColumnGrid(array, columns)
- var colClass = 'col-md-' + (12 / columns)
each val, index in array
 .row
  .col-md-12
   h5=index
 - var i = 0;
 while i < val.length
  .row
   - var j = 0;
   while j < columns && i < val.length
    div(class=colClass)=val[i]
    - j++
    - i++
doctype html(lang='en')
html
head
body
 .container
  +nColumnGrid(categories, 3)

我的类别数组如下所示

        categories: {
            first: [
                'this is the first subforum of the first category'
            ],
            second: [
                'this is the first subforum of the second category.',
                'this is the second subforum of t he second category',
                'this is the first subforum of the second category.',
                'this is the second subforum of t he second category'
            ]
        }

提示：

我正在插入 headers，如果您不喜欢它们，请将其删除。
我正在使用 bootstrap 网格系统。
因此，columns 参数应该是 12 的除数。

干杯 m8es

在 JADE 中有条件的父子 div

Conditional with parent and child div in JADE

conditional

indentation

pug

转换数组

手动控制标签结尾