Q:

Find and replace within attribute values

I have this HTML code:
<div class='images'>
  <img class='thumbnail' src='background/01.png' />  
  <img class='thumbnail' src='background/02.png' />  
  <img class='thumbnail' src='background/03.png' />  
  <img class='thumbnail' src='background/04.png' />  
  <img class='thumbnail' src='background/05.png' />  
</div>

I am looking to change every "background" to "category". I am using this jQuery snippet:
jQuery(document).ready(function(){
 $('.thumbnail').attr('src', $('.thumbnail').attr('src').replace('background', 'category'));
});

But the result :
<div class='images'>
  <img class='thumbnail' src='category/01.png' />  
  <img class='thumbnail' src='category/01.png' />  
  <img class='thumbnail' src='category/01.png' />  
  <img class='thumbnail' src='category/01.png' />  
  <img class='thumbnail' src='category/01.png' />  
</div>

Please note : I can't change img class. Where am I going wrong here?
Thanks

A:

Firstly note that it's better practice to use prop() for this. Secondly, you can pass prop() a function to handle each specific element in the matched set and update its value. Try this:
$('.thumbnail').prop('src', function(i, val) {
    return val.replace('background', 'category');
});

