Get dolara sumie wszystkich elementów z klasą jQuery

Question

Mam następujące 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--> 

jaki sposób można użyć jQuery aby dodać wziąć sumę depozytów, odjąć wypłat i dołączyć go do p.total?

Answer 1

Dostosuj html nieznacznie umieszczenie $ znak przed pierwszym span elementu zawierającego liczbę całkowitą w tym drugim rodzeństwa span elementu zawierającego liczbę dziesiętną jako potomstwo .deposit, .withdrawal elementów; z wykorzystaniem atrybutu data-* do obiektu odniesienia zawierającego obiekty o właściwościach: withdrawal, deposit, ; Array.prototype.reduce(); Number(); String.prototype.replace() dla znaku przecinka ,; .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

Spróbuj tego fiddle.

Edytowane w celu uwzględnienia liczb zmiennoprzecinkowych.

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