如何判断indexOf的奇偶性？以及如何为数组奇偶索引对应的DOM元素添加样式？

一、如何判断数组索引的奇偶性？ #

判断索引奇偶性核心是用取余运算符%，原理很简单：

• 偶数索引：index % 2 === 0 —— 偶数除以2余数为0
• 奇数索引：index % 2 === 1（或index % 2 !== 0）—— 奇数除以2余数为1

举个直观的例子：

const index = 4;
if (index % 2 === 0) {
  console.log("这是偶数索引"); // 会执行，4是偶数
} else {
  console.log("这是奇数索引");
}

二、给数组奇偶索引的div元素添加不同样式 #

你的现有代码有个小细节：初始i=0，第一次点击时i++变成1，会先添加myArr[1]（也就是"b"）。如果想从数组第一个元素（索引0的"a"）开始添加，可以调整i的初始值和递增时机。下面是修改后的完整实现：

1. 先准备基础HTML（确保按钮存在） #

<button id="btn">添加元素</button>

2. 定义奇偶元素的CSS样式 #

/* 偶数索引元素样式 */
.even-element {
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
}

/* 奇数索引元素样式 */
.odd-element {
  background-color: #fff1f0;
  color: #ff4d4f;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
}

3. 修改后的JavaScript代码 #

let myArr = ["a", "b", "c", "d", "e", "f"]; 
const btn = document.querySelector("#btn"); 
const body1 = document.body; 
let i = 0; // 初始值设为0，确保第一次添加的是数组第一个元素

btn.addEventListener("click", function () { 
  let newDiv = document.createElement("div"); 
  newDiv.textContent = myArr[i]; 

  // 根据当前索引的奇偶性，添加对应的样式类
  if (i % 2 === 0) {
    newDiv.classList.add('even-element');
  } else {
    newDiv.classList.add('odd-element');
  }

  body1.appendChild(newDiv); 

  i++;
  // 可选：遍历完数组后重置索引，实现循环添加
  if (i >= myArr.length) {
    i = 0;
  }
});

关键说明： #

• 用i % 2 === 0判断偶数索引，给元素加even-element类；奇数索引则加odd-element类
• 调整了i的递增时机：先使用当前i获取数组元素，再递增i，这样第一次点击会添加myArr[0]（"a"）
• 额外加了数组循环逻辑：当i超过数组长度时重置为0，点击按钮可以循环添加数组元素

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