使用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);

RESULT

<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的工作原理。 $ selector抓取一个项目数组（包含0-N匹配元素），然后将您的操作应用于这些元素。对于某些操作，虽然读取操作如attr('src')，但只读取单个项目才有意义，因此它会读取第一个项目。

你想要的是迭代图像并一次一个地应用你的正则表达式。所以......

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