如何迭代html元素，并结合javascript/jQuery时间

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

本文关键字：结合 javascript 时间 jQuery 元素 何迭代 迭代 html      更新时间：2023-09-26

这是一个jsfield

我正在尝试迭代多个计划，并计算它们的组合剪辑长度分钟:秒每个计划。我可能遗漏了一些明显的东西…

这是我的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);
});
}

谢谢你的帮助!

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

在这个小提琴，我引用当前'。

改变:

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

: 

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

试试这样写:

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

或者更好，在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}"

尝试用以下语句包装calcTime():

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

还要确保ID是唯一的。部分ID可以用作类。

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

相关文章：