Как я могу суммировать значения из группы элементов, используя 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. Вы можете добиться этого, используя общий класс, атрибут данных и 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

Так как вы используете пять переменных с разными именами для хранения суммы пяти частей, вы можете использовать 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>

Однако лучше хранить все суммы в объекте.

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>

Answer 3

Вам нужно увеличивать переменные sumPart{count} в зависимости от итерации. Например, когда вы находитесь в «части 1», вы хотите увеличить sumPartOne и то же самое для «части 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. Таким образом, вы можете использовать условие переключения где вы примените тот же logi c, который вы используете в своем примере, но мы будем увеличивать значения в зависимости от части, в которой мы повторяем. У вас будут значения, увеличивающиеся правильно для каждого суммирования, чем при всех приращениях переменной sumPartOne.