如何优化动态Div集合的循环样式设置代码？

原代码的问题 #

原代码里的外层for循环完全冗余——它会把内部的判断和循环逻辑重复执行divCount.length次，属于没必要的性能浪费，而且多层嵌套循环也让代码可读性变差。

方案1：JS单次遍历优化 #

用一次遍历就能完成所有样式设置，逻辑更清晰，性能更优：

const tiles = document.querySelectorAll(".luggage-tile-wrapper.active");
const tileCount = tiles.length;

tiles.forEach((tile, index) => {
  if (tileCount > 3) {
    if (index < 3) {
      tile.style.flex = "1 0 22.2%";
    } else {
      tile.style.width = "145px";
    }
  } else {
    tile.style.flex = "1 0 22.2%";
  }
});

也可以用三元表达式进一步简化（不影响可读性的前提下）：

const tiles = document.querySelectorAll(".luggage-tile-wrapper.active");
const tileCount = tiles.length;

tiles.forEach((tile, index) => {
  tile.style[tileCount > 3 && index >= 3 ? "width" : "flex"] = 
    tileCount > 3 && index >= 3 ? "145px" : "1 0 22.2%";
});

说明：

• 用querySelectorAll替代getElementsByClassName，返回静态NodeList，避免动态集合在DOM变化时的意外行为；
• 只遍历一次元素集合，根据索引和集合长度直接设置样式，去掉了冗余的嵌套循环；
• 逻辑直观，维护成本更低。

方案2：CSS原生实现（更推荐） #

如果场景允许，直接用CSS就能搞定，不需要JS遍历，动态增减元素时自动生效，性能更好：

/* 默认给所有符合条件的元素设置flex样式 */
.luggage-tile-wrapper.active {
  flex: 1 0 22.2%;
}

/* 匹配父容器下第4个及以后的active元素，设置width并覆盖flex */
.luggage-tile-wrapper.active:nth-child(n+4) {
  width: 145px;
  flex: initial;
}

这种方式完全把样式控制交给浏览器，不需要JS干预，代码最简洁，也符合样式与逻辑分离的原则。

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