get an html element do something and append result back to that element-CodePudding

I am trying to build a music player. now I am getting link of each song, generating its wave, and then printing the wave back to that song. wave is printing in <div ></div>. here is the HTML code

<div >
  <div >
    <div >

      <div >
        <div >
          <span><button href="song.mp3" > song 1<i ></i></button></span>
        </div>
        <div >
          <div >here wave should be of song 1</div>
        </div>
      </div>

      <div >
        <div >
          <span><button href="song2.m4a" > song 2<i ></i></button></span>
        </div>
        <div >
          <div >here wave should be of song 2</div>
        </div>
      </div>

      <div >
        <div >
          <span><button href="song3.mp3" > song 3<i ></i></button></span>
        </div>
        <div >
          <div >here wave should be of song 3</div>
        </div>
      </div>

    </div>
  </div>
</div>

here is the jquery code

$(document).ready(function(){
          var links_arr = [];
        $('.playlist button').each(function () {
          links_arr.push( $(this).attr("href") );
        });
          for (i = 0; i < links_arr.length;   i) {
            var link = links_arr[i];
              var wavesurfer = WaveSurfer.create({
                container: '.wavetest', //container where wave will be printed
                waveColor: 'violet',
                progressColor: 'purple'
            });
              wavesurfer.load(link); //generating wave for given song 
          }

    });

now I am getting the wave of all three songs in first <div ></div>. I want to get the wave in its appropriate div. how can I tackle it and suggest if there is any better of doing this.

CodePudding user response：

Container can be a DOM element, so you can pass each wavetest to each WaveSurfer.create. Let me know if this works.

$(document).ready(function(){
    var links_arr = [];

    $('.playlist .row').each(function () {
        const link = $(this).find('button').attr("href");
        const waveContainer = $(this).find('.wavetest');

        var wavesurfer = WaveSurfer.create({
          // https://wavesurfer-js.org/docs/ says container can be a DOM element
          // waveContainer is a jQuery object, waveContainer[0] to get actually DOM element
          container: waveContainer[0],
          waveColor: 'violet',
          progressColor: 'purple'
        });
        wavesurfer.load(link); //generating wave for given song 
    });
});