Remove filepaths from multiple image elements in HTML using jQuery

Question

I'm trying to keep the filenames but remove the filepaths from the image elements on my page, and I've managed to figure out the following based on what I've already gathered from similar questions.

I'm able to remove just the filepaths, but I can't figure out why the source of the first image is being copied into the other two images.

---

Here's what I've put together so far

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

You arent iterating through all the img elements, try the following:

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

That way you will loop through all the images and replace accordingly the src attribute.

Answer 2

This is how jQuery works. The $ selector grabs an array of items (containing 0-N matched elements) and then applies your operations to those elements. For some operations though- read operations like attr('src') it only makes sense to read a single item, so it reads the first one.

What you want is to iterative over the images and apply your regex to them one at a time. So...

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