CODEWITHSUNDEEP
jquery
Xarcell
Xarcell

Reputation: 2011

Trying to replace image file name with jQuery

I'm trying to grab a image name and replace it. From default.jpg to maxresdefault.jpg. However, the script I'm using throws an error, when it seems to me it should be working.

HTML:

<a href="https://xxxxxxxxx.html" rel="nofollow" target="_self" title="Sample post with one video, part three">
  <div class="related-posts-thumb" itemprop="thumbnailURL" style="background: url(https://img.youtube.com/vi/iBy8UdG3VOo/default.jpg)"></div>
</a>

jQuery:

<!-- LET'S IMPROVE IMAGE QUALITY OF YOUTUBE THUMBNAILS IN THE RELATED POSTS -->
$('#main-content #Blog1 article .related-posts .related-content article .related-posts-thumb').each(function() {
  $(this).attr("src", $(this).attr("src").replace("default.jpg", "maxresdefault.jpg"));
});

This returns the error: Cannot read property 'replace' of undefined

Just to compare, the script below the one that doesn't work, is a similar script that I use and it works just fine:

<!-- LET'S IMPROVE IMAGE QUALITY OF AVATARS IN THE COMMENTS -->
$('#main-content #Blog1 article #comments .comment .avatar-image-container img').each(function() {
  $(this).attr("src", $(this).attr("src").replace("s35", "s72"));
});

Why is the script not working? Two similar scripts, one works, and one doesn't. I even tried the one mentioned here at stackoverflow, but it still has the same problem.

Upvotes: 1

Views: 402

Answers (3)

111
111

Reputation: 1918

You're trying to change the src attribute, but there is no tag with a src attribute. I added an img tag below as an example.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<html>
<body>
<a href="https://xxxxxxxxx.html" rel="nofollow" 
   target="_self" 
   title="Sample post with one video, part three">
  <div class="related-posts-thumb"     
  itemprop="thumbnailURL" 
  style="background: url(https://img.youtube.com/vi/iBy8UdG3VOo/default.jpg); width:150px; height:100px;">
    content
  </div>
  Image tag with src attribute: 
  <br>
  <img id="myImg" src='https://img.youtube.com/vi/iBy8UdG3VOo/default.jpg' />
</a>
</body>

If you want to change the style tag background, edit that attribute instead. this should work for the style: 

$('.related-posts-thumb').each(function() {
  console.log('div style'+ $(this).attr("style") )
  myBgStyle=$(this).attr("style").replace("default.jpg", "maxresdefault.jpg");
  console.log('new bg style: '+myBgStyle)
  $(this).attr('style',myBgStyle);
});



  mySrc=$('#myImg').attr("src").replace("default.jpg", "maxresdefault.jpg");
  console.log('new image source: '+mySrc);
  $('#myImg').attr("src", mySrc);

See here:

https://jsbin.com/naqucipaza/edit?html,js,output

Upvotes: 1

Aleksandar Misich
Aleksandar Misich

Reputation: 502

In the HTML shown, the div uses its style attribute for the image.

The second script works because it's replacing the src element of an img tag.

Since the div you're trying to modify doesn't have a src attribute, it's undefined and therefore doesn't respond to the method you're attempting to call.

Try this:

$('#main-content #Blog1 article .related-posts .related-content article .related-posts-thumb').each(function() {
  $(this).attr('style', $(this).attr('style').replace('default.jpg', 'maxresdefault.jpg'));
});

Upvotes: 1

Johannes
Johannes

Reputation: 67778

The second line should be simpler:

$(this).attr("src", "maxresdefault.jpg"));

And in case you only want to apply this to images which have the src attribut "source.jpg", you should define that in the selector, so it should be

$('#main-content #Blog1 article .related-posts .related-content article .related-posts-thumb[src="source.jpg"]').each(function() {
   $(this).attr("src", "maxresdefault.jpg"));
});

Upvotes: 0

Related Questions