使用jQuery的$.map动态赋值图片属性时重复值问题排查

问题描述 #

需求是通过循环为页面中的图片和span标签动态赋值属性，现有HTML结构和jQuery代码可运行，但所有带.justify-content-center类的div下的图片和span都被赋值为algoimg数组最后一项的ImageURL和StrategyName。

现有HTML代码 #

<div class="justify-content-center">
  <div class="icons">
    <i class='chart-icon'>
      <img src="" alt="">
    </i>
  </div>
  <span></span>
</div>

<div class="justify-content-center">
  <div class="icons">
    <i class='chart-icon'>
      <img src="" alt="">
    </i>
  </div>
  <span></span>
</div>

<div class="justify-content-center">
  <div class="icons">
    <i class='chart-icon'>
      <img src="" alt="">
    </i>
  </div>
  <span></span>
</div>

现有jQuery代码 #

($.map(algoimg, function (item) {
    $(".justify-content-center").find("img").attr("src", item.ImageURL).attr("alt", item.StrategyName);
    $(".justify-content-center").find("span").html(item.StrategyName);       
}));

错误原因 #

1. 全局选择导致覆盖：每次循环中，$(".justify-content-center").find("img")和$(".justify-content-center").find("span")都会选中页面中所有符合条件的元素，每一轮循环都会把所有元素的属性改成当前item的值，最后一轮循环（对应数组最后一项）就会把所有元素覆盖成最后一项的内容。
2. $.map用法错误：$.map的核心作用是遍历数组并返回一个新数组，不是用来执行循环操作的，这里应该用专门做遍历执行的$.each或者普通for循环。

修正后的代码 #

$.each(algoimg, function(index, item) {
  // 根据索引获取对应位置的容器
  const $targetContainer = $(".justify-content-center").eq(index);
  // 为当前容器内的图片设置属性
  $targetContainer.find("img").attr({
    "src": item.ImageURL,
    "alt": item.StrategyName
  });
  // 为当前容器内的span设置文本
  $targetContainer.find("span").text(item.StrategyName);
});

代码说明 #

• 使用$.each遍历数组，回调函数会传入当前元素的索引index和值item，通过索引可以精准对应到页面中第index个.justify-content-center容器。
• 用.eq(index)获取对应位置的容器，确保每次循环只操作当前索引对应的元素，不会影响其他容器。
• 采用attr的对象写法一次性设置多个属性，代码更简洁。
• 用text()代替html()设置span内容，避免注入风险（如果StrategyName是纯文本的话）。

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