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>

我尝试了很多不同的缩进但没有任何作用，每次我在一个条件下编写父级时，该块是自动关闭的，我不知道如何保持它打开，或者重新打开它以将内容放入其中。< / p>

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

这可能有点晚了，但有人可能还在寻找像我一样的答案。就像蒂莫西所说，改造阵列是唯一的方法。如果你要明确地使用html为什么要使用像pug这样的模板系统..但是，不是使用纯javascript方法Timothy建议我发现使用mixins更方便，因为如果你只是使用javascript然后只是在传递之前更改数据结构它进入模板系统。

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

＆＃13;

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)

＆＃13;

我的类别数组看起来像这样

＆＃13;

        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'
            ]
        }

＆＃13;

提示：

我插入标题，如果您不喜欢它们，请将其删除。
我正在使用引导网格系统。
因此，columns参数应为12的数值除数。

干杯m8es

Answer 3

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

有条件的JADE父母和子女div

3 个答案:

转换数组

手动控制标记结束