jQuery-将每一个记录的音频文件从行分别推送到表的行中的输入字段

Question

1. 我有一个下面有2行的表，但它可以用一个按钮(添加另一个Word媒体(加倍，并且所有行只有一个提交按钮：

<tbody>
<tr class="form-row dynamic-medias" id="medias-0">
<td class="field-path_to_file">
<div id="medias-0-path_to_file_with_media_recorder">
<div class="py-2">
<input type="file" name="medias-0-path_to_file" class="bg-slate-100 p-2"
id="id_medias-0-path_to_file">
</div>
<p>
Or record an audio
</p>
<div class="btn-group" role="group">
<button id="medias-0-path_to_file_record_start" type="button"
class="px-2 py-1 text-white bg-green-500 disabled:bg-gray-500 rounded-sm"
onclick="startRecording(this)">
Record
</button>
<button id="medias-0-path_to_file_record_stop" type="button"
class="px-2 py-1 text-white bg-red-500 disabled:bg-gray-500 disabled:text-gray-200 rounded-sm"
onclick="stopRecording(this)" disabled="">
Stop
</button>
</div>
<div class="recording" id="medias-0-path_to_file-record-status">
<span class="text-sm">
Click the "Start Recording" button to start recording
</span>
</div>
</div>
<audio controls="" src="blob:http://localhost:8000/79977bf5-155b-4ca1-b5bc-097b8a55a80a"></audio><a
download="Recorded-Media"
href="blob:http://localhost:8000/79977bf5-155b-4ca1-b5bc-097b8a55a80a">Download it!</a>
</td>
</tr>
<tr class="form-row dynamic-medias" id="medias-1">
<td class="field-path_to_file">
<div id="medias-1-path_to_file_with_media_recorder">
<div class="py-2">
<input type="file" name="medias-1-path_to_file" class="bg-slate-100 p-2"
id="id_medias-1-path_to_file">
</div>
<p>
Or record an audio
</p>
<div class="btn-group" role="group">
<button id="medias-1-path_to_file_record_start" type="button"
class="px-2 py-1 text-white bg-green-500 disabled:bg-gray-500 rounded-sm"
onclick="startRecording(this)">
Record
</button>
<button id="medias-1-path_to_file_record_stop" type="button"
class="px-2 py-1 text-white bg-red-500 disabled:bg-gray-500 disabled:text-gray-200 rounded-sm"
onclick="stopRecording(this)" disabled="">
Stop
</button>
</div>
<div class="recording" id="medias-1-path_to_file-record-status">
<span class="text-sm">
Click the "Start Recording" button to start recording
</span>
</div>
</div>
<audio controls="" src="blob:http://localhost:8000/cd165412-b186-4a11-8fd7-6997750b9bd3"></audio><a
download="Recorded-Media"
href="blob:http://localhost:8000/cd165412-b186-4a11-8fd7-6997750b9bd3">Download it!</a>
</td>
</tr>
<tr class="add-row">
<td colspan="4"><a href="#">Add another Word media</a></td>
</tr>
</tbody>

2. 下面是一个jQuery脚本，它从一个小型音频播放器中获取每一行的录制音频，并将其移动到一个输入类型="；文件"；单击提交按钮时的字段。(顺便说一下，这是一个Django管理面板表单(

$( document ).ready(function() {
$('input[type=submit]').click(async function(e) {
let url = $('audio').attr('src')
if(url != undefined){
const fileInput = document.querySelector('input[type="file"]');

let file = await fetch(url)
.then(r => r.blob())
.then(blobFile => new File([blobFile], "user_recording.mp3", { type: "mp3" }))
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
fileInput.files = dataTransfer.files;
}
$('#word_form').submit()
});
});

问题是jQuery脚本只适用于第一行和一行。有人能帮我修改上面每一行循环的脚本吗(每一行都有自己的音频标签(？并且所有行只有一个提交按钮。对不起我的英语(这不是我的母语：(

Answer 1

感谢Amit Singh和freedomn-m的评论，他们给出了循环的想法：

$( document ).ready(function() {
$('input[type=submit]').click(async function(e) {
let url = $('audio').each(function(){
});
for (i=0; i<url.length; i++) {
new_url = url[i].getAttribute("src");
if (new_url != undefined){
const fileInput = document.getElementById('id_medias-'+i+'-path_to_file');
let file = await fetch(new_url).then(r => r.blob()).then(blobFile => new File([blobFile], "user_recording.mp3", { type: "mp3" }))
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
fileInput.files = dataTransfer.files;
} 
}
$('#word_form').submit()
});
});