如何在遍历循环中获取指定序号的div并按规律执行对应操作

实现逻辑 #

jQuery的each()遍历方法回调的第一个参数i就是当前元素的索引，默认从0开始计数。你需要的三类序号规律刚好对应「序号模3的余数」，直接用取余运算判断即可：

• 序号1、4、7、10……：(i+1) % 3 === 1
• 序号2、5、8、11……：(i+1) % 3 === 2
• 序号3、6、9、12……：(i+1) % 3 === 0

完整修改后代码 #

$(".card").each(function (i, card) {
  // 将0起始索引转换为1起始的序号
  const serialNum = i + 1;
  if(serialNum % 3 === 1) {
    // 第一类操作示例：给元素加蓝色背景
    $(card).css('backgroundColor', '#e6f4ff');
  } else if(serialNum % 3 === 2) {
    // 第二类操作示例：给元素加绿色背景
    $(card).css('backgroundColor', '#f6ffed');
  } else if(serialNum % 3 === 0) {
    // 第三类操作示例：给元素加粉色背景
    $(card).css('backgroundColor', '#fff1f0');
  }
});

简化写法 #

如果不需要显式对应1起始的序号，也可以直接用原生0起始的索引判断，效果完全一致：

$(".card").each(function (i, card) {
  if(i % 3 === 0) {
    // 第一类操作
  } else if(i % 3 === 1) {
    // 第二类操作
  } else if(i % 3 === 2) {
    // 第三类操作
  }
});

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