私はこの "for"ループを分割して5つの異なるDIV要素を作成しようとしています

Question

渡していただきありがとうございます。私は本当に初心者で、私はしようとしています（いくつかのコードを取って、うまくいけば何も間違っているわけではありません）5人のプレイヤーと私は次のコードを使用しました：https://codepen.io/katzkode/pen/ZbxYYG

私は5種類のdiv内のループ、次の（代わりに＃オーディオプレイヤーの5人の異なる選手、それぞれ1のための新しいdiv要素があると思います）：

var files = ["interlude.mp3", // 0 
      "chooseyourweapon.mp3", // 1 
      "interlude.mp3", // 2 
      "scriptures.mp3", 
     "scriptures.mp3"// 3 
      ]; 

：

function createAudioPlayers() { 
    for (f in files) { 
     var playerString = "<div id=\"audioplayer-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\"></button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>"; 
     $("#audio-players").append(playerString); 
    } 
} 

ここからファイルをプルするコードです

私はどのように進むべきかわかりません、私はまだ学んでいます。ありがとうございました。詳細については

for (f in files) { 

の

Answer 1

は、あなただけのループに配列を必要とするようです。

function createAudioPlayers() { 
 
    files.forEach(function(f) { 
 
    var playerString = "<div id=\"audioplayer-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\">" + f + "</button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>"; 
 
    $("#audio-players").append(playerString); 
 
    }) 
 
} 
 

 

 
var files = ["interlude.mp3", // 0 
 
    "chooseyourweapon.mp3", // 1 
 
    "interlude.mp3", // 2 
 
    "scriptures.mp3", 
 
    "scriptures.mp3" // 3 
 
]; 
 
createAudioPlayers()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="audio-players"></div>

Answer 2

使用

for (f of files) { 

インプレース：https://bitsofco.de/for-in-vs-for-of/