Laravel Blade循环渲染后使用jQuery给span赋值出现重复值问题

你调用$(".porcentaje").text(valor)时，该jQuery选择器会匹配页面上所有带porcentaje类的span元素，每轮遍历都会把所有匹配到的元素统一赋值为当前遍历值。数组最后一个元素值为3，所以遍历结束后所有span的文本都被覆盖为3。

方案1：Blade直接渲染（推荐） #

状态对应的数值如果后端已经生成，直接在模板渲染阶段填充即可，不需要额外走前端逻辑，性能更高也更易维护。
假设你传入视图的$status和$total数组索引一一对应，代码示例如下：

@foreach($status as $index => $item)
<div>
  <span>{{ $item->name }}</span>
  <!-- 直接取同索引的数值填充，?? 运算符用于兼容索引不存在的场景 -->
  <span class="porcentaje">{{ $total[$index] ?? 0 }}</span>
</div>
@endforeach

方案2：JS按索引匹配赋值（仅适用于必须前端动态赋值的场景） #

如果确实需要前端动态赋值，遍历数值数组时要匹配对应位置的span元素，不要全量选择：

const total = [3, 3, 4, 3];
// 先获取所有porcentaje元素的集合
const $porcentajes = $(".porcentaje");
// 按索引逐个赋值
total.forEach((valor, idx) => {
  $porcentajes.eq(idx).text(valor);
});

这里用eq(idx)选中集合中指定索引的单个元素，就能实现数值和位置一一对应。

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