Question

我有一些标记，如下所示，显示最近一次付款的历史视图。我试图说明在付款产生的时候每行的余额是什么......

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

我有以下javascript，它将显示组合的当前余额，但需要一些帮助，如何定位所有类是相同的，我不能添加ID的特定行。我不确定是否可以使用previousElementSibling？

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

CURRENT

获得---- ----支付平衡

£0.30 ------- ------- 0£0.60

£0.20 ------- ------- 0£0.60

£0.10 ------- ------- 0£0.60

DESIRED

获得---- ----支付平衡

£0.30 ------- ------- 0£0.60

£0.20 ------- ------- 0£0.30

£0.10 ------- ------- 0£0.10

Answer 1

不需要第二个循环，您可以从index回调的.each变量中获利，分别使用迭代的payment来更新余额。

要按照您希望的方式计算余额的sum，您需要使用$($(".payment-earned").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("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));
});

.payment-earned, .payment-amount, .demo.payment-balance{
  display: inline-block;
  margin: 0px 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<强>替代：

为了获得更好的性能和更高的可读性，您可以使用以下方法避免x[(x.length-1)-index]计算：

$(this).parent().find('.demo').html(sum.toFixed(2));

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;
  }
  $(this).parent().find('.demo').html(sum.toFixed(2));
});

.payment-earned, .payment-amount, .demo.payment-balance{
  display: inline-block;
  margin: 0px 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

滚动计算目标html内容

1 个答案: