循环遍历类，获取类文本值，相加并输出到 div答案

【问题标题】：Loop through classes, get class text value, add together and output to div循环遍历类，获取类文本值，相加并输出到 div
【发布时间】：2014-07-03 00:18:41
【问题描述】：

我有

var val = document.getElementByClassName('duration').text();
var temp = val.split(":");
var total = 0;
var v;
for (var i = 0; i < temp.length; i++) {
    v = parseFloat(temp[i]);
    if (!isNaN(v)) total += v;
    totalmins = parseInt(total / 60);
    totalsecs = parseInt(total % 60);
    total = totalmins + ":" + totalsecs;
}
document.getElementById("total-time").innerHTML = total;

对于html

<ol id="songs">
    <li class="title"><a href="#" data-src="music/barryNice3.mp3">You don't really love me <span class="duration">3:50</span></a></li>
    <li class="title"><a href="#" data-src="music/newjam.mp3">So done with you <span class="duration">4:23</span></a></li>
    <li class="title"><a href="#" data-src="">I actually still love you<span class="duration">3:57</span></a></li>
    <li class="title"><a href="#" data-src="">Call me back please <span class="duration">4:08</span></a></li>
    <li class="title"><a href="#" data-src="">Bye baby bye <span class="duration">3:15</span></a></li>
    <li class="title"><a href="#" data-src="">We together <span class="duration">3:46</span></a></li>
    <li class="title"><a href="#" data-src="">Together Forever <span class="duration">4:05</span></a></li>
</ol>

我需要做的是获取持续时间的值并将它们加在一起，然后将该数字输出到 div。我完全是个菜鸟，我被困住了。

【问题讨论】：

您正在寻找 document.getElementsByClassName，它返回一个没有 text的 NodeList > 方法。
接下来……您要遍历集合中的项目。看起来您对遍历集合有一些了解。此外，您可以使用 data-duration 属性，而不是将持续时间放在一个跨度中吗？可能会为您节省一些额外的步骤...
当然，getElementsByClassName 中的错字可能是让我对此感到如此沮丧的原因。我没有注意到它，所以我最终以不同的方式接近它。

标签： javascript for-loop

【解决方案1】：

在您的代码中：

> var val = document.getElementByClassName('duration').text();

你寻找的方法是getElementsByClassName（注意复数Elements），它返回一个没有text方法的实时NodeList。 p>

在这种情况下，最好使用 querySelectorAll，因为 IE 8 支持，但 getElementsByClassName 不支持，所以：

var elements = document.querySelectorAll('.duration');

现在循环 elements 并获取文本：

var text;
for (var i=0, ilen=elements.length; i<iLen; i++) {
  text = elements[i].textContent || elements[i].innerText;

  // do stuff with text

}

请注意，旧版 IE 支持 W3C textContent 属性作为 innerText。

总结时间（我猜是 mm:ss），你可以这样做：

var b, text, totalTime;
var total = 0;
var elements = document.querySelectorAll('.duration');

// Pad single digit with leading zero
function z(n){return (n<10? '0' : '') + n}

for (var i=0, iLen=elements.length; i<iLen; i++) {
  text = elements[i].textContent || elements[i].innerText;
  b = text.split(':');
  total += b[0]*60 + +b[1];
}
totalTime = (total/60 | 0) + ':' + z(total%60); // 27:24

【讨论】：

我没想过要填充一个数字！我会在我的代码中实现它。

【解决方案2】：

我最终做了一些不同的事情：

var total_seconds = 0;
        // for each class of title do this
        $('.title').each(function() {
            // find class t-duration, get text and split it at the ":"
            var duration = $(this).find('.t-duration').text().split(':'),
                //parse the numbers as minutes and seconds
                minutes = parseInt(duration[0], 10) * 60,
                seconds = parseInt(duration[1], 10),
                // add them together
                total_in_seconds = minutes + seconds;
            //keep a running total
            total_seconds += total_in_seconds;
        });
        // get total minutes by dividing total_seconds by 60
        total_mins = parseInt(total_seconds / 60);
        // get remaining seconds by modulus 60 of total seconds
        total_secs = parseInt(total_seconds % 60);
        total = total_mins + ":" + total_secs;
        $('#total-time').text(total);
    });

【讨论】：