如何更新循环中的html标签的值而不会覆盖以前的轮次

我有一些轨道的url列表。我想在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(){ 
 
\t $.each(trackArray, function(index, value) { 
 
    \t $(".panel").append(
 
    \t "<li>Track #"+ index +" >> <span class='due'></span></li>" 
 
    ); 
 
    getDuration(value, ".due"); 
 
\t }); 
 
} 
 

 
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标签的价值。任何想法解决它，所以它会显示列表中的实际值？

来源

2016-01-07 TheGuy

给每跨越一个唯一的类或ID的东西 - 然后使用，在 “目的地” 参数 –

雅becasue'“.due”'匹配所有...我会使用索引 –

给每个跨越例如

在这个例子中独特的一类，而不是。由于，这将是.due0，.due1，...

的情况下，您使用的类名。到期的造型，每个跨度也将有类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); 
    }); 
}

来源

2016-01-07 13:28:41

传递.due，你的目标与due类的所有元素。你应该通过index过，如：

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(){ 
 
\t $.each(trackArray, function(index, value) { 
 
    \t $(".panel").append(
 
    \t "<li>Track #"+ index +" >> <span class='due'></span></li>" 
 
    ); 
 
    getDuration(value, ".due", index); 
 
\t }); 
 
} 
 

 
function getDuration(src, destination, index) { 
 
    var audio = new Audio(); 
 
    $(audio).on("loadedmetadata", function(){ 
 
     $(destination).eq(index).html(this.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>

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(){ 
 
\t $.each(trackArray, function(index, value) { 
 
    \t $(".panel").append(
 
    \t "<li>Track #"+ index +" >> <span class='due'></span></li>" 
 
    ); 
 
    getDuration(value, ".due"); 
 
\t }); 
 
} 
 

 
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>

来源

2016-01-07 13:30:48

如何更新循环中的html标签的值而不会覆盖以前的轮次

回答

相关问题