如何使用 jQuery 对一组元素的值求和？

Question

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/

Answer 1

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.

Answer 2

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

ps 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.

Answer 3

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>