如何在foreach循环中按预设顺序通过if-else设置两种不同class？

这事儿其实很好搞定，核心是先抓住你要的class切换规律，再把它转化成循环里的条件判断就行。先看你给的预设顺序：

c2 → c2 → c1 → c1 → c2 → c2 → c1 → c1 → c2 → c2

明显能看出来，每4个元素是一个小周期：2个c2 + 2个c1，10条记录刚好是2个完整周期（8个元素），再补上最后2个c2，完美契合这个周期规律。

所以我们只需要在foreach循环里，通过当前元素的索引值做模4运算，就能精准判断该用哪个class了。

前端JavaScript实现示例 #

// 模拟10条记录，实际项目里换成你的真实数据
const records = Array(10).fill('..content..');
// 假设你要把元素插入到这个容器里
const container = document.getElementById('target-container');

records.forEach((content, index) => {
  const div = document.createElement('div');
  // 核心判断：索引模4，余数0/1用c2，余数2/3用c1
  div.className = index % 4 < 2 ? 'c2' : 'c1';
  div.textContent = content;
  container.appendChild(div);
});

后端PHP模板实现示例 #

如果是后端渲染DOM（比如用PHP模板），逻辑是一样的：

<?php
// 模拟10条记录
$records = array_fill(0, 10, '..content..');
?>

<?php foreach($records as $index => $content): ?>
  <div class="<?php echo $index % 4 < 2 ? 'c2' : 'c1'; ?>">
    <?php echo $content; ?>
  </div>
<?php endforeach; ?>

注意点 #

如果你的循环索引是从1开始的（比如某些模板引擎默认索引从1计数），只需要把判断条件改成($index - 1) % 4 < 2，就能和上面的逻辑保持一致，不会出错。

内容的提问来源于stack exchange，提问作者Sonu Tyagi