帕格 – 翡翠每n个元素添加div

我正在使用Jade,我希望每n个项目排成一排,就像这样

.row
  .product
  .product
  .product
.row

这似乎做了我想要的事情……

for p in products
  - var klass = (i % 3 == 0?"row product simpleCart_shelfItem col-md-4":"product simpleCart_shelfItem col-md-4")
  - i++
  div(class=klass)
    .. more product stuff

这不是我想要的,因为.row项目被添加到同一个div中.有没有一种方法可以做到这一点,而无需编写产品n次？

通常,在Jade模板中执行该逻辑的方法不能很好地工作.

更强大的方法是将产品阵列分成二维阵列,即请求处理程序方法内的产品阵列阵列.

因此,假设您在请求处理程序方法中有以下数组的产品(产品).您可以将其转换为二维数组(products2D)并将其作为参数传递给您的Jade模板.

例：

function arrayTo2DArray (list, howMany) {
    var result = []; input = list.slice(0); 
    while(a[0]) { 
        result.push(a.splice(0, howMany)); 
    }
    return result;
}

var handler = function(req, res) {
   var products = [ ... ] // fetched from DB
   var products2D = arrayTo2DArray(products, 3)

   res.render('template', { products: products2D });
}

在Jade模板中,您可以渲染数组(将生成.row元素),然后在.row元素内部,您可以迭代生成.product元素的产品.

例：

for prodGroup in products2D 
  .row
    ...
    for p in prodGroup
      .product
        ... more product stuff

有关将数组转换为二维数组的更多示例,请参阅此post.

我希望这会有所帮助.