JS/jQuery Dynamically Replace each/multiple IMG on page using thumbnail image from API-CodePudding

I'm struggling to write the proper function to replace each img instance inside the wrapper div's. The page I'll be implementing this on will have a dynamic number of wrappers with thumbnails and Vimeo links. I'm trying to dynamically apply the thumbnail, by pulling it from the API, to each img instance accordingly.

Here is a styled page for reference where the first instance works correctly: https://rapt3.webflow.io/projects/tbe-banner-video-22

Here is a codepen with the latest snippet.

var ele = '#wrap';

    $.each($(ele), function()
    {
        var vimeoLink = $("a#vimLink").attr("href");
        var vAPIprefix = "https://vimeo.com/api/oembed.json?url=";
        var url = vAPIprefix   vimeoLink;
        var vURL;
        var img_url;



        $.getJSON( url, function( data ) {
        console.log(data);
        img_url = data.thumbnail_url;
        console.log(`IMG URL: ${img_url}`);
        jQuery('#titleID').replaceWith(img_url);
        $('#thumb').attr("srcset",img_url);

        });

    });

.wrapper {display: flexbox; flex-direction: column;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>



<div id="wrap" >
<div id="titleID">Test</div>
<a id="vimLink" href="https://vimeo.com/566613630">View on Vimeo</a>
<img id="thumb" src="">
</div>

<div id="wrap" >
<div id="titleID">Test</div>
<a id="vimLink" href="https://vimeo.com/747740403/7c08c6505a">View on Vimeo</a>
<img id="thumb" src="">
</div>

<div id="wrap" >
<div id="titleID">Test</div>
<a id="vimLink" href="https://vimeo.com/747740344/d1cc0af377">View on Vimeo</a>
<img id="thumb" src="">
</div>

CodePudding user response：

You cannot use the same ID tag more than once. The reason why only the first one works is because it is the first instance of the ID. Instead, use classes. So, loop through the .wrapper and use the find() method to target the elements within each wrapper.

I can't test this, but it should work

var ele = '.wrapper';

$.each($(ele), function() {
  var vimeoLink = $(this).find("a.vimLink").attr("href");
  var vAPIprefix = "https://vimeo.com/api/oembed.json?url=";
  var url = vAPIprefix   vimeoLink;
  var vURL;
  var img_url;

  $.getJSON(url, function(data) {
    console.log(data);
    img_url = data.thumbnail_url;
    console.log(`IMG URL: ${img_url}`);
    $(this).find('.titleID').html(img_url);
    $(this).find('.thumb').attr("src", img_url);

  });

});

.wrapper {
  display: flexbox;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div >
  <div >Test</div>
  <a  href="https://vimeo.com/566613630">View on Vimeo</a>
  <img  src="">
</div>

<div >
  <div >Test</div>
  <a  href="https://vimeo.com/747740403/7c08c6505a">View on Vimeo</a>
  <img  src="">
</div>

<div >
  <div >Test</div>
  <a  href="https://vimeo.com/747740344/d1cc0af377">View on Vimeo</a>
  <img  src="">
</div>

CodePudding user response：

Okay I've solved it myself after some help from Kinglish. First change was using classes instead of ID's

You cannot use the same ID tag more than once. The reason why only the first one works is because it is the first instance of the ID. Instead, use classes. So, loop through the .wrapper and use the find() method to target the elements within each wrapper.

But the other issue was that $.getJSON runs async, causing the replace actions such as $(this).find('.thumb').attr("src", img_url); to fail to run. By moving the replace calls outside of the $.getJSON AND adding this snippet $.ajaxSetup({async: false});, the $.each works properly.