javascript - 如何在不覆盖前几轮的情况下循环更新html标签的值

我有一些曲目的网址列表。我想在html列表中显示每个曲目的持续时间。我可以设法从函数中获取持续时间值，但问题是在循环的每一轮中，它都会使用从持续时间函数获取的新值覆盖给定标签。因此，整个列表会不断更新。

var src1, src2, src3, trackArray;
src1 = "https://goo.gl/o4nxfq";
src2 = "https://goo.gl/wc1pgB";
src3 = "https://goo.gl/25uOY6";
trackArray = [src1, src2, src3];
function initAudioPlayer(){
	$.each(trackArray, function( index, value ) {
  	$(".panel").append(
    	"<li>Track #"+ index +" >> <span class='due'></span></li>"
    );
    getDuration(value, ".due");
	});
}

function getDuration(src, destination) {
    var audio = new Audio();
    $(audio).on("loadedmetadata", function(){
        $(destination).html(audio.duration);

    });
    audio.src = src;
}

$(document).ready(function(){
    initAudioPlayer();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="panel"></ul>

如您所见，它显示了所有li标签的最后一轮循环的值。
任何想法解决它，以便它将在列表中显示实际值吗？

最佳答案

例如，给每个范围一个唯一的类

在此示例中，它将是.due0，.due1 ...而不是.due。

如果您使用类名.due进行样式设置，则每个范围还将具有due和due#类

function initAudioPlayer(){
    $.each(trackArray, function( index, value ) {
        $(".panel").append(
            "<li>Track #"+ index +" >> <span class='due due"+index+"'></span></li>"
        );
        getDuration(value, ".due"+index);
    });
}