获取html元素，并将结果追加到该元素

Question

我在试着打造一个音乐播放器。现在我得到了每首歌的链接，生成它的波浪，然后打印回那首歌。wave正在<div class="wavetest"></div>中打印。这是HTML代码

<div class="playlist p-5">
  <div class="song p-3">
    <div class="container">

      <div class="row">
        <div class="col-sm-2">
          <span><button href="song.mp3" class="songlink btn"> song 1<i class="fa fa-play playbtn"></i></button></span>
        </div>
        <div class="col-sm-8">
          <div class="wavetest">here wave should be of song 1</div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-2">
          <span><button href="song2.m4a" class="songlink btn"> song 2<i class="fa fa-play playbtn"></i></button></span>
        </div>
        <div class="col-sm-8">
          <div class="wavetest">here wave should be of song 2</div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-2">
          <span><button href="song3.mp3" class="songlink btn"> song 3<i class="fa fa-play playbtn"></i></button></span>
        </div>
        <div class="col-sm-8">
          <div class="wavetest">here wave should be of song 3</div>
        </div>
      </div>

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

以下是jquery代码

$(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 
          }

    });

现在，我在第一次<div class="wavetest"></div>中得到了这三首歌的高潮。我想把波放在适当的地方。我如何处理它，并建议如果有任何更好的做法。

Answer 1

容器可以是DOM元素，因此您可以将每个wavetest传递给每个WaveSurfer.create。如果这有用的话请告诉我。

$(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 
    });
});