Get the total number of dollars of all class elements using jQuery

Question

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 a total contribution, subtract the withdrawals and add it to p.total?

Answer 1

Try adjusting html slightly by placing the $ character in front of the first span element containing integers, including the second sibling span element containing the decimal number as descendants of the .deposit , .withdrawal ; using the data-* attribute for a reference object containing the properties withdrawal , deposit , total ; Array.prototype.reduce() ; Number() ; String.prototype.replace() for the comma character String.prototype.replace() .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--> 

Answer 2

Try fiddle .

Edited for floating points.

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