CODEWITHSUNDEEP
javascriptjqueryhtml
dpDesignz
dpDesignz

Reputation: 1959

Get HTML of multiple divs with Jquery

I have multiple divs formatted like as follows

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

And I want to get the values from that and add them, but I can't get it to work for some reason. This is my code so far:

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');
}

It does calculate fine, but it's only the first value over and over. I think it's got to do with an array but not sure how to select each item.

What am I doing wrong?

Upvotes: 0

Views: 139

Answers (6)

Roamer-1888
Roamer-1888

Reputation: 19288

Simplest way is to convert the jQuery collection to a true array with .get(), then use .reduce() to scan the array and make a running total.

Also, use parseInt() (or parseFloat()) to convert the numeric part of each string to Number.

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');
}

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

$('.slot_totals').html() will always return the html of the first element in the collection represented by the selector. This is basically true for almost all jQuery getters since only one value can be returned

You could use eq() to define the matching indexed element.

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

Reference: eq() Docs

Upvotes: 3

blurfus
blurfus

Reputation: 14031

Try this jquery .each code

$(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

Upvotes: 0

MrMartiniMo
MrMartiniMo

Reputation: 149

You can use .each() to iterate over your .slot_totals. I think parseFloat() should be enough to parse the values.

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

http://jsfiddle.net/kta7y5cy/

Upvotes: 2

Gaurav Kalyan
Gaurav Kalyan

Reputation: 1897

Here is the working fiddle

Updated Code:

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');
 }

Upvotes: 1

Alexis King
Alexis King

Reputation: 43842

You need to actually select which .slot_totals element you're operating on in each loop. Change this line:

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

to this one:

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

Your code could be made more expressive and more readable if you used jQuery's .each function instead:

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');
}

Upvotes: 1

Related Questions