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

Question

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

我只能删除文件路径，但是我不知道为什么将第一张图片的源复制到其他两张图片中。

---

到目前为止，这是我整理的

的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/

Answer 1

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

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

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

Answer 2

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

您想要的是遍历图像，然后一次将正则表达式应用于它们。 所以...

$('img').each(function(index, item){
  // Read/write attr here
});