javascript - 从具有特定类的每个元素中获取文本，然后相加

Question

我正在尝试使用 javascript 进行一些计算。我基本上是获取具有特定类的每个元素的文本，将其转换为数字，然后将这些数字相加。这是我到目前为止所得到的:

<p class="item-size">1000</p>
<p class="item-size">2000</p>

JS:

$(document).ready(function(){
    var elements = document.getElementsByClassName("item-size");
    var size = ''
    for (var i=0; i<elements.length; i++) {
        size += parseInt((elements[i].innerText).replace(/[^0-9.]/g, ""));
    }
    console.log(size);
});

这会在控制台中返回 10002000。但是，我需要获取这些值中的每一个，然后将它们相加，而不是将它们显示为一个数字。所以结果应该是 3000。我试过这个:

var myTotal = 0;
for(var i = 0, len = size.length; i < len; i++) {
    myTotal += size[i][1];  
    console.log(myTotal);
}

但是，这会返回 NaN。任何想法如何做到这一点？

Answer 1

您需要一个数字作为目标变量。

 $(document).ready(function(){
      var elements = document.getElementsByClassName("item-size");
      var size = 0; // <-- zero instead of an empty string
      for (var i=0; i<elements.length; i++) {
          size += parseInt((elements[i].innerText).replace(/[^0-9.]/g, ""), 10); // take base
      }
      console.log(size);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="item-size">1000</p>
<p class="item-size">2000</p>