如何用jQuery将页面图片转为图片链接并添加alt属性？

需求说明 #

现有如下空白alt属性的图片元素：

<img src="https://images4.imagebam.com/qwert.jpg" alt="" />
<img src="https://images4.imagebam.com/werty.jpg" alt="" />

需要实现两个效果：

• 将每张图片转换为指向自身的链接（点击可打开原图）
• 为每张图片添加有效的alt属性
  同时无法修改那段将链接转为图片的反向功能代码。

jQuery实现代码 #

JavaScript 代码

// 遍历所有alt为空的img元素
$('img[alt=""]').each(function(index) {
  const $img = $(this);
  const imgSrc = $img.attr('src');
  
  // 创建指向图片的a标签
  const $link = $('<a>').attr('href', imgSrc);
  
  // 为图片设置alt属性，这里用序号+文件名生成，可按需自定义
  const fileName = imgSrc.split('/').pop();
  $img.attr('alt', `图片${index + 1}: ${fileName}`);
  
  // 将图片移入a标签，替换原img的位置
  $img.appendTo($link);
  $img.replaceWith($link);
});

HTML 示例

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- 原始图片元素 -->
<img src="https://images4.imagebam.com/qwert.jpg" alt="" />
<img src="https://images4.imagebam.com/werty.jpg" alt="" />

代码说明 #

• 用选择器img[alt=""]精准定位需要处理的空白alt图片，避免干扰其他已有有效alt的图片
• 通过split('/').pop()提取图片文件名，结合序号生成有意义的alt文本，也可以替换为固定描述或其他规则
• 创建a标签并绑定图片地址为跳转链接，将原图片移入a标签后替换原位置，完成图片转链接的转换
• 这段代码和反向转换代码不会冲突，可根据场景调整执行顺序（比如先执行图片转链接，再执行链接转图片）

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