JQuery remove image src prefix

Question

Hi. I have a bunch of images on a page that are contained within a div with a class of content-block like this:

<div class="content-block">
    <img src="../images/path/path/image.jpg" alt="blah" title="blah" />
    <img src="../images/path/path/image.jpg" alt="blah" title="blah" />
    <img src="../images/path/path/image.jpg" alt="blah" title="blah" />
    <img src="../images/path/path/image.jpg" alt="blah" title="blah" />
    <img src="../images/path/path/image.jpg" alt="blah" title="blah" />
</div>

I am loading this html into a div via ajax. When I load it in I need to remove the "../" before the image path, after it loads in so the path remains correct. Can this be done with JQuery? Many thanks in advance.

MY JQUERY CODE FOR LOADING IN THE HTML:

$(document).ready(function() {
$('.projects a').click(function(event) {
    $('#work').load(this.href + ' #loadwork');
    event.preventDefault();
});

});

EDIT

$(document).ready(function() {
$('.projects a').click(function(event) {
    $('#work').load(this.href + ' #loadwork', function(){
           $('.content-block>img').each(function(){
           $(this).attr('src',$(this).attr('src').replace('../',''));
        });
    });
    event.preventDefault();
});

});

Answer 1

$('.content-block>img').each(function(){
  $(this).attr('src',$(this).attr('src').replace('../',''));
});

That should do the trick.

--edit--

based on your code, try it like this:

$(document).ready(function() {
  $('.projects a').click(function(event) {
    $('#work').load(this.href + ' #loadwork',function(response){
      $(response).find('div>img').each(function(){
        $(this).attr('src',$(this).attr('src').replace('../',''));
        // Output the response to the DOM
      });
    });
    event.preventDefault();
  });
});

I think that should work... you might have to play a little bit with the find selector.

Answer 2

Try this (not tested):

$('.content-block img').each(function() {
        var path = $(this).attr('src');
        path = path.substr(3);
        $(this).attr('src', path);
    }
);

Answer 3

You probably want to execute the replace in a callback from the load method so that it only executes after your images have been loaded. Something like this (using Brant's replace code):

$('#work').load(this.href + ' #loadwork', function()
{
   $('.content-block>img').each(function(){
   $(this).attr('src',$(this).attr('src').replace('../',''));
});
}));

Answer 4

Or, alternatively, generate the HTML via a server side method that calculates the URLs relative to the root of the application ("/appName/images/path/path/image.jpg"), and then you can load the markup into any page without worrying about whether it will work or not. This prevents you from having to process the html fragments on the client side, making your pages a bit cleaner.