grabbing values from label and adding them in jQuery

Question

I want to grab all the values from the label with class price and add them using jQuery. Now actual webpage is different but to understand the concept I am only putting minimum code here. There are 3 labels for prices, and 1 more for total:

<label class="price">120</label>
<label class="price">250</label>
<label class="price">342</label>
<label id="total"></label>

I read that .each() can be used but I could not understand how to use it for this purpose. I have uploaded jsfiddle over here http://jsfiddle.net/vivpad/cysjtrh8/1/

Updated your fiddle example. [http://jsfiddle.net/cysjtrh8/6/](http://jsfiddle.net/cysjtrh8/6/) — Think Different, Nov 19 '15 at 11:58

score 2 · Accepted Answer · answered Nov 19 '15 at 11:55

2

Basic example

jQuery(document).ready(function($){
    var total = 0;
    $('label.price').each(function(){
        var value = parseFloat($(this).text());
        total += value;
    });
    $('#total').text(total);
});

DEMO

answered Nov 19 '15 at 11:55

Mohamed-Yousef

23,946
3
19
28

Simple and readable. Why someone would want to overcomplicating it... (referring to my own answer) – A. Wolff Nov 19 '15 at 12:01
Thanks, this seems to be simplest and easiest solution. I will rate it as correct one – Vivek Padhye Nov 19 '15 at 12:03
@A.Wolff that's why genius you are .. you have more and more of solutions to do the job .. and that is what I know about A.Wolff :) – Mohamed-Yousef Nov 19 '15 at 12:05
@VivekPadhye Thanks , and Good Luck to you – Mohamed-Yousef Nov 19 '15 at 12:05

score 2 · Answer 2 · answered Nov 19 '15 at 11:56

2

You could get total price mapping .price elements text:

jQuery(document).ready(function ($) {
    $('#total').text(function () {
        return $('.price').map(function () {
            return +$(this).text()
        }).get().reduce(function (pv, cv) {
            return pv + cv;
        }, 0);
    });
});

-jsFiddle-

answered Nov 19 '15 at 11:56

A. Wolff

74,033
9
94
155

interesting use of reduce. – Jai Nov 19 '15 at 11:57
1

@Jai From [there](http://stackoverflow.com/questions/3762589/fastest-javascript-summation) But that's not really optimized and not really readable. I find mohamed's answer better imho – A. Wolff Nov 19 '15 at 11:57

score 1 · Answer 3 · answered Nov 19 '15 at 11:59

Note that you need to add jquery to your jsfiddle.

Also - you don't need to use .each - you can use arrays as well. Which simplifies it much and it is more efficient. See here: http://jsfiddle.net/vivpad/cysjtrh8/9

var sum = 0;
var prices = $("label.price");
for (var i = 0; i < prices.length; i++)
    sum += parseInt($(prices[i]).text());

$("#total").text(sum);

score 1 · Answer 4 · answered Nov 19 '15 at 12:00

1

try this:

jQuery(document).ready(function($){
    var total = 0;
    $('.price').each(function() {
        var temp = $(this).html();
        total += parseFloat(temp);
    });
    $('#total').html(total);
});

JsFiddle

answered Nov 19 '15 at 12:00

Apb

979
1
8
25

score 0 · Answer 5 · answered Nov 19 '15 at 12:16

Try:

var labelvalues = $('label').map(function () {
     return $(this).text();
 }).get();
 var total = 0;
 for (var i = 0; i < labelvalues.length; i++) {
     total += labelvalues[i] << 0;
 }
 $("#total").text(total);

DEMO

Here I am using map function to translate all items to new array of items. And add the elements in the array.

grabbing values from label and adding them in jQuery

5 Answers5

-jsFiddle-