CODEWITHSUNDEEP
jqueryhtmlimageattributesattr
John strick
John strick

Reputation: 3

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

Upvotes: 0

Views: 40

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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');
});

Upvotes: 1

Related Questions