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/
精彩评论