玉：每四个元素循环一次，改变阶级

Question

我正在构建一个步进音序器，我想使用Jade将每个4个元素分组到一个子组中。 到目前为止，我只能使用所需的类来获取第n个元素，但是我知道有一种方法可以做到这一点。 唯一的约束是我需要跟踪循环中的当前索引（从1到32），以便可以向每个input元素正确添加唯一的id 。

到目前为止，我的代码奇怪地为每n+2元素设置样式：

- for (var i = 0; i < steps; i++)
                - if (i % 4 === 0 || altGroup % 2 === 0)
                  - stepClass="step even"
                  - altGroup++
                - else
                  - stepClass="step"
                input(type="checkbox", class = "#{stepClass}", id = "channel#{index}-step#{i}")
                label(for = "channel#{index}-step#{i}")
                  span.hook ^

在这里看到笔

Answer 1

基于上面的交换，我将每个子组与一个类sub-group分隔为一个span元素，以使其更加清晰。 请在此处查看更新的CodePen 。

关键逻辑总结如下：

- for (var i = 0; i < steps/4; i++)
    - if (altGroup % 2 == 0)
        - stepClass = "step"
    - else
        - stepClass = "step even"
    span.sub-class
        - for (var j=0; j < groupSize; j++)
            input(type="checkbox", class = "#{stepClass}", id = "channel#{index}-step#{i}")
            label(for = "channel#{index}-step#{i}")
                span.hook ^
        - altGroup ++;

注意：我假设组大小是一个常数，并将其添加为变量。