简化JavaScript条件语句：优化批量添加元素类名的代码方案

问题背景 #

我正在修改一款缺失部分类的WordPress插件，计划通过自定义脚本为元素添加类名，用于后续添加CSS伪元素。目前实现的代码使用了冗长的if-else条件语句，现寻求更优的代码写法。

相关HTML代码片段 #

<div class="side_by_side">
  <label for="fieldname6_1_rb7">
    <input
      aria-label="Van"
      name="fieldname6_1"
      id="fieldname6_1_rb7"
      class="field group required"
      value="489"
      vt="Van"
      type="radio"
    />
    <span>Van</span></label>
</div>

当前JavaScript代码 #

const modelInputLabel = document.querySelectorAll(".side_by_side span");
for (let i = 0; i < modelInputLabel.length; i++) {
  if (i === 0) {
    modelInputLabel[i].setAttribute("class", "test modelFirst");
  } else if (i === 1) {
    modelInputLabel[i].setAttribute("class", "test modelSecond");
  } else if (i === 2) {
    modelInputLabel[i].setAttribute("class", "test modelThird");
  } else if (i === 3) {
    modelInputLabel[i].setAttribute("class", "test modelFourth");
  } else if (i === 4) {
    modelInputLabel[i].setAttribute("class", "test modelFifth");
  } else if (i === 5) {
    modelInputLabel[i].setAttribute("class", "test modelSixth");
  } else if (i === 6) {
    modelInputLabel[i].setAttribute("class", "test modelSeventh");
  } else if (i === 7) {
    modelInputLabel[i].setAttribute("class", "test modelEight");
  }
}

优化方案 #

方案1：匹配原类名格式（序数词数组） #

如果需要保留modelFirst、modelSecond这类英文序数词命名的类名，可以用数组存储序数词，结合forEach循环简化代码：

// 定义对应位置的序数词
const ordinals = ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth', 'Seventh', 'Eight'];

// 遍历目标元素批量设置类名
document.querySelectorAll(".side_by_side span").forEach((element, index) => {
  // 直接替换元素类名（和原逻辑一致）
  element.className = `test model${ordinals[index]}`;
  // 若需保留原有类名，改用classList.add：
  // element.classList.add('test', `model${ordinals[index]}`);
});

方案2：数字后缀简化命名（推荐） #

如果不需要严格遵循英文序数词格式，直接用数字后缀更简洁，无需维护序数词数组，后续新增元素也不用修改代码：

document.querySelectorAll(".side_by_side span").forEach((element, index) => {
  element.className = `test model${index + 1}`;
  // 对应CSS可写成 .model1::after { ... }、.model2::after { ... }
});

说明 #

• 两种方案都用forEach替代了传统for循环，代码更简洁易读；
• 方案2扩展性更强，无论后续有多少选项，都能自动生成对应类名；
• 若需保留元素原有类名，建议使用classList.add()方法，避免覆盖原有类。

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