jQuery遍历数组判断属性值应用CSS仅触发else分支问题修复

• 核心逻辑错误：你在forEach遍历数组的过程中，每一次循环都会直接修改.test元素的背景色，前一次循环设置的样式会被后一次循环的设置直接覆盖。
• 对应执行流程拆解：
  1. 遍历第一个数组项时，length值为None确实匹配判断条件，此时背景色会被设置为红色
  2. 遍历第二个数组项时，对象本身不存在length属性，判断条件不成立，走入else分支把背景色改成蓝色，前一步设置的红色被直接覆盖
  3. 遍历第三个数组项时，length值为Full不满足匹配条件，再次走入else分支设置背景为蓝色
• 最终遍历结束后，元素保留的永远是最后一次循环设置的蓝色样式，哪怕前面存在匹配成功的项，设置的红色也会被后续操作覆盖。

不要在遍历过程中反复修改DOM样式，先完成数组的匹配判断，拿到最终的匹配结果后再统一设置样式即可。
如果你的需求是只要数组中存在任意一个满足匹配条件的对象，就给div应用红色样式，否则应用蓝色，可以直接用数组的some()方法做判断，修复后的完整JS代码如下：

let testArray = [{"length": "None", "duration": "10000", "percentage": "65"}, {"width": "Half", "detail": "under", "duration": "25000", "percentage": "25"}, {"length": "Full", "duration": "20000", "percentage": "90"}]

// 先完成匹配判断：是否存在符合条件的数组项
const isMatched = testArray.some(obj => obj.length?.toLowerCase() === 'none')
// 统一根据判断结果设置样式，不会出现中途覆盖的问题
$('.test').css('background-color', isMatched ? 'red' : 'blue')

对应的HTML和CSS代码无需修改，运行后就能在存在匹配项时正确显示红色背景。

如果你需要的是其他匹配逻辑，比如取最后一个匹配项的结果、取第一个匹配项的结果，只需要调整判断逻辑拿到最终布尔结果后再设置样式即可，核心原则是不要在遍历循环里反复覆盖DOM样式。

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