Javascript 针对html内容的滚动计算

我有一些标记，如下所示，显示了付款的历史视图，最新的在顶部。我试图表明，在支付款项时，每一行的余额是多少

<div class="row">
<div class="payment-description">Payment #3</div>
<div class="payment-earned">£0.30</div>
<div class="payment-amount"></div>
<div class="demo payment-balance"></div>
</div>


<div class="row">
<div class="payment-description">Payment #2</div>
<div class="payment-earned">£0.20</div>
<div class="payment-amount"></div>
<div class="demo payment-balance"></div>
</div>


<div class="row">
<div class="payment-description">Payment #1</div>
<div class="payment-earned">£0.10</div>
<div class="payment-amount"></div>
<div class="demo payment-balance"></div>
</div>

付款#3
£0.30
付款#2
£0.20
付款#1
£0.10

我有如下javascript，它将显示组合的当前平衡，但需要一些帮助，以了解如何通过particluar行定位，因为所有类都是相同的，并且我不能添加ID。我不确定是否可以使用以前的ElementSibling

var x = document.getElementsByClassName("demo");
var sum = 0;
var i;
$(".payment-earned").each(function() {
        var val = $.trim( $(this).text() );
        if ( val ) {
            val = parseFloat( val.replace( /^\£/, "" ) );
            sum += !isNaN( val ) ? val : 0;
        }
    });
for (i = 0; i < x.length; i++) {
    x[i].innerHTML = (sum.toFixed(2));
}

var x=document.getElementsByClassName（“演示”）；
var总和=0；
var i；
美元（“.payment earned”）。每个（功能（）{
var val=$.trim（$（this.text（））；
if（val）{
val=parseFloat（val.replace（/^\£/，“”）；
sum+=！isNaN（val）？val:0；
}
});
对于（i=0；i

当前

挣的----付的----余额

---

英镑0.30--------0--------0.60英镑

0.20--------0--------0.60英镑

英镑0.10--------0--------0.60英镑

渴望的

挣的----付的----余额

---

英镑0.30--------0--------0.60英镑

英镑0.20--------0--------0.30英镑

---

英镑0.10----0----0.10

不需要第二个循环，您可以从

的
索引
变量中获益。每个
回调分别用迭代的
付款
更新余额

要以您希望的方式计算余额的
和
，您需要使用
$（$（“.payment owned”）.get（）.reverse（））
以相反的顺序循环元素

这是您的代码应该如何编写的：

var x = document.getElementsByClassName("demo");
var sum = 0;
$($(".payment-earned").get().reverse()).each(function(index) {
  var val = $.trim($(this).text());
  if (val) {
    val = parseFloat(val.replace(/^\£/, ""));
    sum += !isNaN(val) ? val : 0;
  }
  x[(x.length - 1) - index].innerHTML = (sum.toFixed(2));
});

演示：


var x=document.getElementsByClassName（“演示”）；
var总和=0；
$（$（“.payment earned”）.get（）.reverse（））.each（函数（索引）{
var val=$.trim（$（this.text（））；
if（val）{
val=parseFloat（val.replace（/^\£/，“”）；
sum+=！isNaN（val）？val:0；
}
x[（x.length-1）-index].innerHTML=（sum.toFixed（2））；
});
。已获得付款、.payment amount、.demo.payment-balance{
显示：内联块；
利润率：0px 4px；
}

付款#3
£0.30
付款#2
£0.20
付款#1
£0.10
不需要第二个循环，您可以从
的
索引
变量中获益。每次
回调都会使用迭代的
付款
分别更新余额

要以您希望的方式计算余额的
和
，您需要使用
$（$（“.payment owned”）.get（）.reverse（））
以相反的顺序循环元素

这是您的代码应该如何编写的：

var x = document.getElementsByClassName("demo");
var sum = 0;
$($(".payment-earned").get().reverse()).each(function(index) {
  var val = $.trim($(this).text());
  if (val) {
    val = parseFloat(val.replace(/^\£/, ""));
    sum += !isNaN(val) ? val : 0;
  }
  x[(x.length - 1) - index].innerHTML = (sum.toFixed(2));
});

演示：


var x=document.getElementsByClassName（“演示”）；
var总和=0；
$（$（“.payment earned”）.get（）.reverse（））.each（函数（索引）{
var val=$.trim（$（this.text（））；
if（val）{
val=parseFloat（val.replace（/^\£/，“”）；
sum+=！isNaN（val）？val:0；
}
x[（x.length-1）-index].innerHTML=（sum.toFixed（2））；
});
。已获得付款、.payment amount、.demo.payment-balance{
显示：内联块；
利润率：0px 4px；
}

付款#3
£0.30
付款#2
£0.20
付款#1
£0.10
感谢您的回复，但我认为这并没有达到我想要的效果，因为它是在孤立地复制任何行的值-它应该将当前行添加到下面的任何行中，给出该行中截至该点的总数row@PaulSmith我的错我更新了我的答案，你应该用
$($(“.payment earned”）.get（）.reverse（））
以您想要的方式计算和附加
总和
。这将为您提供您需要的。我没有让代表投票支持您的答案，但感谢您的回复，但我认为这并不是我想要的，因为它单独复制了任何行的值-它应该将当前行添加到任何行下面给出了该点的总数row@PaulSmith我的错我更新了我的答案，你应该用
$（$（“.payment owned”）.get（）.reverse（）反向循环元素
以您想要的方式计算和附加
总和
。这将为您提供您需要的。我没有代表投票支持您的答案，但效果很好，非常感谢