html要素を反復処理して、javascript/jQueryと組み合わせた時間を取得するにはどうすればよいですか？

Question

ここにはJSfiddleがあります。

私は複数のプランを反復しようとしており、プランごとの秒数：秒を合わせたクリップの長さを計算しようとしています。私はおそらくここに何かを明らかに不足しています...ここで

は私のHTMLです：

<div id="right" class="active"> 
    <div class="plan"> 
     <span id="pl-title" contenteditable="true">Plan 1</span> 
     <ul id="pl" class="sort"> 
      <li class="note yellow"> 
       <span id="note-title">First Clip</span> 
       <span id="note-time">4:00</span> 
      </li> 
      <li class="note pink"> 
       <span id="note-title">Second Clip</span> 
       <span id="note-time">0:45</span> 
      </li> 
     </ul> 
     <span id="pl-length">Length: <span id="pl-time">0:00</span></span> 
    </div> 
    <div class="plan"> 
     <span id="pl-title" contenteditable="true">Plan 2</span> 
     <ul id="pl" class="sort"> 
      <li class="note yellow"> 
       <span id="note-title">Third Clip</span> 
       <span id="note-time">3:30</span> 
      </li> 
      <li class="note pink"> 
       <span id="note-title">Fourth Clip</span> 
       <span id="note-time">1:18</span> 
      </li> 
     </ul> 
     <span id="pl-length">Length: <span id="pl-time">0:00</span></span> 
    </div> 
</div> 

は、ここに私のJavascript（私もjQueryのを使用しています）です：助けを

function calcTime() { 
$('.plan').each(function(){ 
    var min = []; 
    var sec = []; 
    $('#pl li #note-time').each(function(){ 
     var data = $(this).text(); 
     var time = data.split(':'); 
     min.push(time[0]); 
     sec.push(time[1]); 
    }); 
    var totalmin = 0; 
    var totalsec = 0; 
    for(var i = 0; i < min.length; i++){ 
    var thisVal = parseInt(min[i]); 
    if(!isNaN(thisVal)){ 
     totalmin += thisVal; 
    } 
    } 
    for(var i = 0; i < sec.length; i++){ 
    var thisVal = parseInt(sec[i]); 
    if(!isNaN(thisVal)){ 
     totalsec += thisVal; 
    } 
    } 
    // Convert to seconds 
    var m = (totalmin * 60); 
    var s = (totalsec + m); 
    // Convert to Min:Sec 
    minv = Math.floor(s/60); 
    secv = s % 60; 
    if (secv == 0){ var secv = "00"; } 

    $('#pl-time').text(minv+':'+secv); 
}); 
} 

感謝！

Answer 1

http://jsfiddle.net/ShThS/6/

、私は値を正しく計算することができ、現在の '.planの' div要素を参照しています。

変更：

$('#pl li #note-time').each(function(){ 

へ：

$(this).find('#pl li #note-time').each(function(){ 

Answer 2

することのような何か試してみてください。また

$(".plan").each(function() { 
    var total_hr = 0; 
    var total_min = 0; 
    $("#note-time", this).each(function() { 
    var t = $(this).html().split(':'); 
    total_hr += parseInt(t[0]); 
    total_min += parseInt(t[1]); 
    }) 
    total_hr += Math.floor(total_min/60); 
    total_min = total_min % 60; 
    $("#pl-time", this).html(total_hr + ':' + total_min); 
}) 

を使用すると、複数のアイテムを持っている要素を持っている場合は、あなたの代わりにIDのクラスを使用する必要があります。

$(".plan").each -> 
    h = 0; m = 0 
    for el in $ "#note-time", @ 
    t = $(el).html().split ':' 
    h += parseInt t[0] 
    m += parseInt t[1] 
    h += Math.floor m/60 
    m %= 60 
    $("#pl-time", @).html "#{h}:#{m}" 

Answer 3

はこれでCalcTimeに（）をラップしてみP：

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

をし、またIDが一意であることを確認してください

いっそ、coffeescriptでそれをさらに短くします。 IDの一部はクラスとして使用できます。このフィドルで

http://jsfiddle.net/ShThS/7/