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