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

Question

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

当我使用console.log并且浏览器显示结果时，它是div元素中所有值的总和。 如何在它们具有相同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

实现您需要的最简单的方法是构建一个由part-X值键入的 object。 您可以使用常见的 class、数据属性和each()来实现，如下所示：

 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>

这种方法的好处是它可以无限扩展，只需修改 HTML。 如果添加/删除了任何其他元素组，则无需更改 JS。

Answer 2

您需要根据迭代增加变量sumPart{count} 。 例如，当您在“part-1”时，您想要增加sumPartOne ，而对于“part-2”，您想要增加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 这样，您可以使用切换条件，您将应用您在示例中使用的相同逻辑，但我们将根据我们正在迭代的部分增加值。 与sumPartOne变量的所有增量相比，每个总和的值都会正确增加。

Answer 3

由于您使用五个不同命名的变量来存储五个部分的总和，因此您可以使用switch来存储总和。

 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>

但是，最好将所有总和存储在 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>