jQuery如何将每张图片的alt文本移动到其对应同级元素

调用.append()、.insertAdjacentHTML()、.insertAfter()方法实现将每张图片的alt文本移动到其同级元素的效果时，运行结果不符合预期。
预期实现效果结构：

Image 1

Caption 1

Image 2

Caption 2

现有代码运行后仅能获取第一张图片的alt文本，无法实现每张图片的alt文本一一对应插入到自身同级的元素中。

• HTML中重复使用了id="here"，不符合HTML id全局唯一的规范，jQuery选择span#here时只会匹配到第一个符合条件的元素
• 直接调用$("img").attr("alt")时，仅会返回匹配到的第一张图片的alt属性值，不会遍历所有图片
• 逻辑未做上下文关联，没有建立单张图片和其对应同级容器的绑定关系，无法实现精准的一一插入

1. 先修正HTML结构问题，将重复的id替换为通用类名caption，保证所有图片对应的文本容器可以被正常选中
2. 使用.each()方法遍历所有图片，在遍历上下文内获取当前图片的alt文本，再查找当前图片同级的caption容器插入对应内容

修正后JS代码 #

// 遍历所有演示图片
$(".demo-img").each(function(i) {
  const currentImg = $(this);
  // 获取当前图片的alt属性值
  const captionText = currentImg.attr("alt");
  // 查找当前图片同级的文本容器，插入对应内容
  currentImg.siblings(".caption")
    .append(`<strong>Image ${i + 1}</strong><br>`)
    .append(`${captionText}<br>`);
});

修正后CSS代码 #

.wrap {
  margin-bottom: 10px;
}
.demo-img {
  width: 280px;
}
.caption {
  display: block;
}

修正后HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4Y5jq?ver=ac72&q=90&m=6&h=201&w=358&b=%23FFFFFFFF&l=f&o=t&aim=true" alt="Example Image Caption 1" class="demo-img">
  <span class="caption"></span>
</div>
<div class="wrap">
  <img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/gldn-M365-CP-Microsoft365-Commercial?wid=380&hei=213&fit=crop" alt="Example Image Caption 2" class="demo-img">
  <span class="caption"></span>
</div>

• 替换重复id为类名后，选择器可以正常匹配所有图片对应的文本容器，不会出现只选中第一个元素的问题
• .each()遍历中通过$(this)获取当前正在处理的图片实例，解决了之前只能拿到第一张图片alt属性的问题
• 使用.siblings()查找同级的caption容器，保证每段文本只会插入到对应图片的同级位置，不会出现内容错位
• 遍历的索引值i从0开始计数，+1后即可匹配Image 1、Image 2的序号要求，和预期结构完全一致

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