CODEWITHSUNDEEP
javascriptjqueryhtmlmath
JordanBarber
JordanBarber

Reputation: 2101

Get dollar total of all elements with class using jQuery

I have the following 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-->

How can i use jQuery to add take total deposits, subtract the withdrawals and append it to the p.total?

Upvotes: 5

Views: 678

Answers (2)

guest271314
guest271314

Reputation: 1

Try adjusting html slightly by placing $ character before first span element containing whole number including second sibling span element containing decimal number as descendants of .deposit , .withdrawal elements; utilizing data-* attribute to reference object containing withdrawal , deposit, total properties; Array.prototype.reduce() ; Number() ; String.prototype.replace() for comma , character ; .each()

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

Upvotes: 1

KiiroSora09
KiiroSora09

Reputation: 2287

Try this fiddle.

Edited to take floating points into account.

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

Upvotes: 3

Related Questions