Jade：每 4 个元素循环一次，更改类答案

【问题标题】：Jade: Loop Through Every 4 Elements, Changing ClassJade：每 4 个元素循环一次，更改类
【发布时间】：2014-06-13 20:03:16
【问题描述】：

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

到目前为止，我的代码奇怪地设置了每个 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 ^

See the pen here

【问题讨论】：

请注意，Stack Overflow 的 Markdown 解析器不支持带栅栏的反引号（即```），您需要使用 4 个空格缩进代码（或选择代码并按 Ctrl+K） .
不完全确定我理解但这是pen 你想要的吗？并且按子组，您是否希望它们在另一个 DOM 元素中，如果是，请告诉我，我会调整笔。
好的，谢谢！我不敢相信我离得这么近！继续更新。
没问题。抱歉，今天我花了这么长时间才做到这一点，是那些日子之一。我将在下面添加一个答案。我已经更改了一些逻辑，但希望它符合您的要求。

标签： javascript html node.js pug

【解决方案1】：

根据上面的交换，我将每个子组分成一个span 元素，其类为sub-group，以使其更清晰。请查看更新后的CodePen here。

关键逻辑总结如下：

- 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 ++;

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

【讨论】：