使用 jQuery 从 HTML 中的多个图像元素中删除文件路径

Remove filepaths from multiple image elements in HTML using jQuery

本文关键字：元素 图像元 删除 路径 文件 图像 jQuery HTML 使用      更新时间：2023-09-26

我正在尝试保留文件名，但从页面上的图像元素中删除文件路径，并且我已经设法根据我已经从类似问题中收集到的内容找出以下内容。

我只能删除文件路径，但我无法弄清楚为什么第一个图像的源被复制到其他两个图像中。

这是我到目前为止整理的内容

.HTML

<img src="/path/to/image.gif" />
<img src="/different/path/to/picture.jpg" />
<img src="another/path/to/graphic.png" />

.JS

var abc = $('img').attr('src');
var def = abc.split('/').pop();
$('img').attr('src', def);

结果

<img src="image.gif">
<img src="image.gif">
<img src="image.gif">

http://jsfiddle.net/aztdeu0w/

您没有遍历所有 img 元素，请尝试以下操作：

$('img').each(function(){
    var imgName = $(this).attr('src').split('/').pop();
    $(this).attr('src', imgName);
});

这样，您将遍历所有图像并相应地替换 src 属性。

这就是jQuery的工作方式。$ 选择器获取一个项目数组（包含 0-N 匹配的元素），然后将您的操作应用于这些元素。但是，对于某些操作 - 读取操作（如attr('src')，只读取单个项目才有意义，因此它会读取第一个项目。

您想要的是迭代图像并一次将正则表达式应用于它们。 所以...

$('img').each(function(index, item){
  // Read/write attr here
});
相关文章：