Question

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!

Answer 1

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(){