如何用jQuery .each循环正确填充多类下的img与b标签内容

问题根源 #

你遇到的是异步操作的经典坑：Ajax请求是异步执行的，each循环会先跑完所有迭代，等接口返回数据触发success回调时，循环里的变量已经指向最后一次迭代的元素，导致所有b标签都被设置成最后一条数据的文本。

两种可行的解决方案 #

方案一：用let保存当前DOM元素 #

在each循环里，把当前的a标签用let存成变量，确保每个异步回调都能拿到属于自己的DOM元素：

function LoadSBImages() {
  $('.graphsdetails a').each(function() {
    // 用let保存当前a标签，每个回调单独持有这个变量的引用
    let $currentLink = $(this);
    // 假设你的a标签有data-id属性用来传请求参数
    let dataId = $currentLink.data('id');

    $.ajax({
      url: '你的接口地址',
      type: 'GET',
      data: { id: dataId },
      dataType: 'json',
      success: function(res) {
        // 用保存好的$currentLink查找子元素，不会串
        $currentLink.find('.sbimage').attr('src', res.imageUrl);
        $currentLink.find('.sbname').text(res.name);
      },
      // 加个错误处理更稳妥
      error: function() {
        $currentLink.find('.sbimage').attr('src', '默认图片地址');
        $currentLink.find('.sbname').text('加载失败');
      }
    });
  });
}

// 页面加载完成后执行
$(document).ready(function() {
  LoadSBImages();
});

方案二：用Ajax的context指定回调上下文 #

jQuery的$.ajax方法支持context参数，可以把回调函数里的this指定为当前循环的a标签：

function LoadSBImages() {
  $('.graphsdetails a').each(function() {
    let dataId = $(this).data('id');

    $.ajax({
      url: '你的接口地址',
      type: 'GET',
      data: { id: dataId },
      dataType: 'json',
      // 关键：把回调里的this绑定到当前的a标签
      context: this,
      success: function(res) {
        // 这里的this就是当前的a标签，直接操作即可
        $(this).find('.sbimage').attr('src', res.imageUrl);
        $(this).find('.sbname').text(res.name);
      }
    });
  });
}

$(document).ready(LoadSBImages);

额外优化建议（给jQuery新手） #

• 尽量把要操作的DOM元素提前存在变量里（比如$currentLink），避免重复查找DOM，提升页面性能
• 一定要加错误处理，避免接口请求失败时页面显示异常
• 如果你的后端支持批量查询，可以把所有需要的ID收集起来，发一次请求再分配数据，减少请求次数：

function LoadSBImages() {
  // 收集所有需要请求的ID和对应的DOM元素
  let requestList = [];
  $('.graphsdetails a').each(function() {
    requestList.push({
      id: $(this).data('id'),
      $el: $(this)
    });
  });

  // 批量请求接口
  $.ajax({
    url: '批量查询接口地址',
    type: 'POST',
    data: JSON.stringify({ ids: requestList.map(item => item.id) }),
    contentType: 'application/json',
    dataType: 'json',
    success: function(allRes) {
      // 匹配数据和对应的DOM元素
      requestList.forEach(function(item) {
        let targetData = allRes.find(res => res.id === item.id);
        if (targetData) {
          item.$el.find('.sbimage').attr('src', targetData.imageUrl);
          item.$el.find('.sbname').text(targetData.name);
        }
      });
    }
  });
}

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