Как использовать .each () внутри для цикла со списком?

Question

У меня есть список, который я пытаюсь перебрать, чтобы превратить каждый div в собственную песню.Список, который я имею, упрощен с помощью JSON, потому что данные поступают из набора запросов Django.Моя проблема в том, что я не могу понять, как перейти к следующему объекту, не повторяя его в цикле.

Я попытался установить переменные outisde, чтобы остановить его или перейти к следующей песне безуспех.

The Json as data variable:  [{"song":{"file":"music/the_unlighteds_2.mp3"}},{"song":{"file":"music/the_unlighted_6_32.mp3"}}]

Script code:

 <script>



        $("h1[id]").each(function(){

            var next_song = "";
            var data = [{{ chap_song|safe }}]
            console.log(data);
            for (var i in data) {

            var next_song = JSON.stringify(data[i].song.file);


            }
            console.log(next_song);
            if(this.id==='scroll-to')$(this).html("<audio controls autoplay> <source src=https://theunlighted.io/media/"+next_song.replace(/\"/g, "")+ " type=\"audio/wav\"></audio>");

});


 </script>

Answer 1

$("h1[id]").each(function(index){
            var next_song = [];
            var data = [{"song":{"file":"music/the_unlighteds_2.mp3"}},{"song":{"file":"music/the_unlighted_6_32.mp3"}}]
            console.log(data);
            for (var i in data) {

            next_song.push(JSON.stringify(data[i].song.file));


            }
            console.log(next_song[index]);
            if(this.id==='scroll-to')$(this).html("<audio controls autoplay> <source src=https://theunlighted.io/media/"+next_song[index].replace(/\"/g, "")+ " type=\"audio/wav\"></audio>");

});

Я никогда не использовал jquery, но он описан в соответствии с вашими потребностями.Вы можете попробовать мой способ написания

Answer 2

Вы можете попробовать использовать один и тот же индекс цикла для доступа к данным в обоих массивах.

var data = [{{ chap_song|safe }}];
$("h1[id]").each(function(i){ // i is the index of the current h1
  var song = data[i]; // so we want the corresponding song
  $(this).html("<audio controls autoplay> <source src=https://theunlighted.io/media/"+song.file.replace(/\"/g, "")+ " type=\"audio/wav\"></audio>");
});