前端初学者：如何用jQuery遍历SKU列表动态添加至HTML并重构代码

Hey there! 作为前端新手，用重构项目来练手提升技能真的太赞了👏 针对你需要通过SKU定位图片并动态添加到div的需求，我来分享几个jQuery的简洁实现方式，比原生循环更清爽：

1. 遍历SKU数组批量创建图片 #

如果你的SKU是存放在数组里的，用jQuery的$.each()方法就能轻松搞定，代码简洁还易读：

// 示例SKU列表，替换成你实际的SKU数据
const skuList = ['sku-001', 'sku-002', 'sku-003'];
// 缓存目标div，避免重复查找DOM提升性能
const $targetContainer = $('#your-target-div');

// jQuery each遍历SKU数组
$.each(skuList, function(index, sku) {
  // 根据SKU拼接图片URL，这里替换成你实际的图片路径规则
  const imgSrc = `/assets/images/products/${sku}.jpg`;
  
  // 直接创建img元素并追加到目标div，链式调用超流畅
  $('<img>', {
    src: imgSrc,
    alt: `产品图片：${sku}`, // 记得加alt属性，兼顾无障碍和SEO
    class: 'product-img' // 可以自定义样式类
  }).appendTo($targetContainer);
});

2. 遍历页面上的SKU元素生成图片 #

如果你的SKU是来自页面上的DOM元素（比如带data-sku属性的标签），可以直接用jQuery选择器结合.each()遍历：

// 假设页面上有多个带data-sku属性的元素，比如 <span class="sku-tag" data-sku="sku-001"></span>
// 先缓存目标div
const $targetContainer = $('#your-target-div');

$('.sku-tag').each(function() {
  // 获取当前元素的SKU值
  const sku = $(this).data('sku');
  const imgSrc = `/images/products/${sku}.png`;
  
  // 追加图片到目标div，用模板字符串简化写法
  $targetContainer.append(`<img src="${imgSrc}" alt="SKU: ${sku}" class="product-img">`);
});

进阶小技巧：批量DOM操作提升性能 #

如果需要添加的图片数量很多，建议先把所有图片的HTML字符串拼接好，再一次性插入DOM，减少DOM操作次数，性能会更好：

const skuList = ['sku-001', 'sku-002', 'sku-003'];
const $targetContainer = $('#your-target-div');

// 用map生成所有img的HTML字符串，再join成一个整体
const imgHtml = skuList.map(sku => 
  `<img src="/assets/images/${sku}.jpg" alt="产品${sku}" class="product-img">`
).join('');

// 一次性插入到目标div
$targetContainer.append(imgHtml);

这些方法都充分利用了jQuery的链式调用和封装特性，比原生循环代码更简洁易维护，非常适合重构时优化代码结构~

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