Question

我有多个div格式如下

<div class="slot_totals">8.00 hrs</div>

我希望从中获取值并添加它们，但由于某种原因我无法使其工作。到目前为止，这是我的代码：

function refreshTotals() {
    var $totalHours = 0.00;
    for (var $i=0; $i<$('.slot_totals').length; $i++) {
        var $slotTotal = $('.slot_totals').html().split(" ");
        $slotTotal = Number($slotTotal[0]);
        $totalHours += $slotTotal;
    }
    // $('').html($totalHours.toFixed(2)+' hrs');
    console.log($totalHours.toFixed(2)+' hrs');
}

确实计算得很好，但它只是反复的第一个值。我认为这与数组有关，但不确定如何选择每个项目

谁能看到我做错了什么？我该如何解决呢？

Answer 1

$('.slot_totals').html()将始终返回选择器所代表的集合中第一个元素的html。对于几乎所有jQuery getters来说基本上都是如此，因为只能返回一个值

您可以使用eq()来定义匹配的索引元素。

var $slotTotal = $('.slot_totals').eq($i).html().split(" ");

参考：eq() Docs

Answer 2

您可以使用.each()来迭代.slot_totals。我认为parseFloat()应该足以解析这些值。

$(function () {
    var sum = 0;
    $('.slot_totals').each(function (index, slot) {
        sum += parseFloat(slot.innerHTML);
    });
    alert(sum);
});

http://jsfiddle.net/kta7y5cy/

Answer 3

您需要实际选择每个循环中正在操作的.slot_totals元素。改变这一行：

var $slotTotal = $('.slot_totals').html().split(" ");

到这一个：

var $slotTotal = $('.slot_totals').eq($i).html().split(" ");

如果您使用jQuery的.each函数，那么您的代码可以更具表现力和更易读：

function refreshTotals() {
    var $totalHours = 0.00;
    $('.slot_totals').each(function () {
        var $slotTotal = $(this).html().split(" ");
        $slotTotal = Number($slotTotal[0]);
        $totalHours += $slotTotal;
    });
    console.log($totalHours.toFixed(2)+' hrs');
}

Answer 4

这是工作fiddle

更新代码：

function refreshTotals() {
    var $totalHours = 0.00;
    for (var $i=0; $i<$('.slot_totals').length; $i++) {
        var $slotTotal = $('.slot_totals:eq('+$i+')').html().split(" ");
        $slotTotal = Number($slotTotal[0]);
        $totalHours += $slotTotal;
    }
    // $('').html($totalHours.toFixed(2)+' hrs');
    console.log($totalHours.toFixed(2)+' hrs');
 }

Answer 5

试试这个jquery .each代码

$(function () {
    var total = 0;
    $('.slot_totals').each(function (index, value) {
        var thisSlotTotal = $(value).html().split(" ");
        thisSlotHours = Number(thisSlotTotal[0]);
        console.log(thisSlotHours.toFixed(2) + ' hrs');
        total += thisSlotHours;
    });
    alert(total);
});

<强> DEMO: JSFIDDLE

Answer 6

最简单的方法是使用.get()将jQuery集合转换为真正的数组，然后使用.reduce()扫描数组并运行总计。

另外，使用parseInt()（或parseFloat()）将每个字符串的数字部分转换为数字。

function refreshTotals() {
    var total = $('.slot_totals').get().reduce(function(total, el) {
        return total + parseInt($(el).html());//or parseFloat()
    }, 0);
    console.log($totalHours.toFixed(2)+' hrs');
}

使用Jquery获取多个div的HTML

6 个答案: