Question

我有以下html：

<div class="balance">
    <div class="heading">
        <p class="total"><span>00</span></p>
    </div>
    <div class="instance withdrawal">
        <h3>Random</h3>
        <p>desc</p>
        <p class="amount">$350.<span>00</span></p>
    </div>
    <div class="instance deposit">
        <h3>Added in</h3>
        <p>desc</p>
        <p class="amount">$1,250.<span>00</span></p>
    </div>
    <div class="instance withdrawal">
        <h3>Bill</h3>
        <p>desc</p>
        <p class="amount">$50.<span>00</span></p>
    </div>
</div>
<!--end wallet-container left-->

我如何使用jQuery添加总存款，减去提款并将其附加到p.total？

Answer 1

试试这个fiddle。

编辑将浮点数考虑在内。

<强> JS

$(function() {
  var total = 0;

  // Check each instance
  $('.instance').each(function() {
    var
      $this = $(this),
      clone = $this.find('.amount').clone(),
      amount = 0,
      floating = 0;

    // Get floating point
    floating = parseFloat('0.' + clone.find('span').text());
    clone.find('span').remove();

    // Get integer amount
    amount = parseInt(clone.text().replace(/\D+/gim, ''), 10);

    if (!isNaN(amount) && amount > 0) {
      if ($this.is('.deposit')) total += (amount + floating); // Deposit
      else if ($this.is('.withdrawal')) total -= (amount + floating); // Withdrawal
    }
  });

  // Format total with commas
  var formatted = ('' + parseInt(total, 10)).split('').reverse().join('');
  formatted = formatted.replace(/(\d{3})/gim, '$1,');
  formatted = formatted.split('').reverse();
  if (formatted[0] == ',') formatted.shift();
  formatted = formatted.join('');

  $('.total').text('$' + parseInt(formatted, 10) + '.');

  var decimal = (total - parseInt(total, 10)) * 100;
  $('.total').append('<span>' + decimal + '</span>')
});

Answer 2

尝试将html字符放在包含整数的第一个$元素之前，稍微调整span，包括包含十进制数的第二个兄弟span元素作为.deposit的后代，.withdrawal元素;利用data-*属性引用包含withdrawal，deposit，total属性的对象; Array.prototype.reduce(); Number();逗号String.prototype.replace()字符,; .each()

＆＃13;

var res = {
  deposit: 0,
  withdrawal: 0,
  total: 0
};

function calculate(el) {
  return el.get().reduce(function(a, b) {
    return Number(a.textContent.replace(/,/g, "")) + Number(b.textContent)
  })
}

$(".deposit, .withdrawal").each(function(i, el) {
  res[$(el).data().type] += calculate($("span", el))
})

res.total = res.deposit - res.withdrawal;

$(".total span").html(res.total);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="balance">
  <div class="heading">
    <p class="total" data-type="total"><span>00</span>
    </p>
  </div>
  <div class="instance withdrawal" data-type="withdrawal">
    <h3>Random</h3>
    <p>desc</p>
    <p class="amount">$<span>350</span><span>.00</span>
    </p>
  </div>
  <div class="instance deposit" data-type="deposit">
    <h3>Added in</h3>
    <p>desc</p>
    <p class="amount">$<span>1,250</span><span>.00</span>
    </p>
  </div>
  <div class="instance withdrawal" data-type="withdrawal">
    <h3>Bill</h3>
    <p>desc</p>
    <p class="amount">$<span>50</span><span>.00</span>
    </p>
  </div>
</div>
<!--end wallet-container left-->

＆＃13;

使用jQuery通过类获取所有元素的总计

2 个答案: