How to iterate through html elements and get combined time with javascript/jQuery?

Here is a JSfiddle.

I'm trying to iterate through multiple plans, and calculate their combined clip lengths minutes:seconds per plan. I'm missing something obvious here probably...

Here is my 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>

Here's my Javascript (I'm also using 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);
});
}

Thanks for the help!

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

In this fiddle, i'm referencing the current '.plan' div which allows the value to be calculated properly.

Changing:

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

To:

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

Try something like:

$(".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);
})

Also, if you have an element that has more than one item, you should use a class instead of an ID.

Or better yet, make it even shorter in coffeescript :P

$(".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}"

Try wrapping the calcTime() with this:

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

And also make sure that ID is unique. some of the ID can be used as class.

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