0

How can I sum values from a group of elements using jQuery?

When I use console.log and the browser shows the result it is the sum of all values from the div elements. How can I sum my values in a condition that they have the same class?

let sumPartOne = 0;
let sumPartTwo = 0;
let sumPartTree = 0;
let sumPartFour = 0;
let sumPartFive = 0;

for (let i = 1; i < 6; i++) {
  $(`.part-${i}`).each(function() {
    sumPartOne += isNaN($(this).text()) ? 0 : parseInt($(this).text());
  })
}

console.log(sumPartOne);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="part-1">10</div>
<div class="part-2">20</div>
<div class="part-3">30</div>
<div class="part-4">40</div>
<div class="part-5">50</div>

<div class="part-1">20</div>
<div class="part-2">30</div>
<div class="part-3">40</div>
<div class="part-4">50</div>
<div class="part-5">60</div>

https://jsfiddle.net/bq0md39y/22/

Improve this question
2
  • Aren't you already doing it in the example? Commented Aug 4, 2020 at 10:09
  • what am I do is just sum all my values inside the div, I wanna make how to sum grouping by element class Commented Aug 4, 2020 at 10:15

3 Answers 3

Reset to default
2

The simplest way to achieve what you need to would be to build an object keyed by the part-X value. You can achieve that using a common class, a data attribute and each(), like this:

let sum = {};
$('.part').each((i, el) => sum[el.dataset.group] = (sum[el.dataset.group] || 0) + parseInt(el.innerText, 10));

console.log(sum);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="part" data-group="part-1">10</div>
<div class="part" data-group="part-2">20</div>
<div class="part" data-group="part-3">30</div>
<div class="part" data-group="part-4">40</div>
<div class="part" data-group="part-5">50</div>

<div class="part" data-group="part-1">20</div>
<div class="part" data-group="part-2">30</div>
<div class="part" data-group="part-3">40</div>
<div class="part" data-group="part-4">50</div>
<div class="part" data-group="part-5">60</div>

The benefit of this approach is that it's infinitely extensible simply by amending the HTML. You don't need to change the JS if any other groups of elements are added/removed.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

thanks for awesome code, but I must read your code first, for the beginner like me it's a little difficult to read your code, but really I wanna say thanks to you, have a nice day
1

You need to increment variables sumPart{count} based on iteration. For example when you are at "part-1" you want to increment sumPartOne and same for "part-2" you want to increment sumPartTwo

let sumPartOne = 0;
let sumPartTwo = 0;
let sumPartThree = 0;
let sumPartFour = 0;
let sumPartFive = 0;

function addition(part, i) {
   switch (part) {
     case 1:
       sumPartOne += isNaN(i) ? 0 : parseInt(i);
      
     case 2:
       sumPartTwo += isNaN(i) ? 0 : parseInt(i);
       
     case 3:
       sumPartThree += isNaN(i) ? 0 : parseInt(i)
       
     case 4:
       sumPartFour += isNaN(i) ? 0 : parseInt(i);
       
     case 5:
       sumPartFive += isNaN(i) ? 0 : parseInt(i);
   }
}

for (let i = 1; i < 6; i++) {
        $(`.part-${i}`).each(function () {
        addition(i, $(this).text())
    })
}

console.log('1', sumPartOne);
console.log('2', sumPartTwo);
console.log('3', sumPartThree);
console.log('4', sumPartFour);
console.log('5', sumPartFive);

p.s. This way you can use switch condition where you will apply same logic that you are using in your example but we will increment values based on part on which we are iterating. You will have values incremented properly for each summation than having all increments on sumPartOne variable.

Improve this answer

Comments

1

Since you are using five differently named variables to store the sum of the five parts, you can use switch to store the sums.

let sumPartOne   = 0;
let sumPartTwo   = 0;
let sumPartThree = 0;
let sumPartFour  = 0;
let sumPartFive  = 0;

for (let i = 1; i < 6; i++) {
    let sum = 0;
    $(`.part-${i}`).each(function () {
        sum += isNaN($(this).text()) ? 0 : parseInt($(this).text());
    })
    switch(i) {
        case 1: sumPartOne   = sum; break;
        case 2: sumPartTwo   = sum; break;
        case 3: sumPartThree = sum; break;
        case 4: sumPartFour  = sum; break;
        case 5: sumPartFive  = sum; break;
    }
}

console.log(sumPartOne, sumPartTwo, sumPartThree, sumPartFour, sumPartFive);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="part-1">10</div>
<div class="part-2">20</div>
<div class="part-3">30</div>
<div class="part-4">40</div>
<div class="part-5">50</div>

<div class="part-1">20</div>
<div class="part-2">30</div>
<div class="part-3">40</div>
<div class="part-4">50</div>
<div class="part-5">60</div>

However, it would be better to store all the sums in an object.

let sums = {};

for (let i = 1; i < 6; i++) {
    let sum = 0;
    $(`.part-${i}`).each(function () {
        sum += isNaN($(this).text()) ? 0 : parseInt($(this).text());
    })
    sums[`.part-${i}`] = sum;
}

console.log(sums);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="part-1">10</div>
<div class="part-2">20</div>
<div class="part-3">30</div>
<div class="part-4">40</div>
<div class="part-5">50</div>

<div class="part-1">20</div>
<div class="part-2">30</div>
<div class="part-3">40</div>
<div class="part-4">50</div>
<div class="part-5">60</div>

Improve this answer

1 Comment

it's cool thanks for your suggest, so I must use switch-case for my case? Is I can't use if-case in my code?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.