Ottenere dollaro totale di tutti gli elementi con class utilizzando jQuery

Question

ho il seguente codice 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--> 

Come posso usare jQuery per aggiungere accettare depositi totali, sottrarre i prelievi e aggiungerlo al p.total?

Answer 1

Prova a regolare html leggermente posizionando $ carattere prima del primo elemento di contenimento span numero intero compreso secondo elemento di pari span contenente numero decimale come discendenti .deposit, .withdrawal elementi; utilizzando l'attributo data-* come riferimento all'oggetto contenente withdrawal, deposit, total proprietà; Array.prototype.reduce(); Number(); String.prototype.replace() per il carattere della virgola ,; .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

Prova questo fiddle.

Modificato per tenere conto dei punti in virgola mobile.

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