How to get sum of each data using jQuery?

Question

As shown as below example I want sum of each Product price and sum of all sell. And after I want Final amount Value1 * Value 2.

I have tried each loop of jQuery but getting any solutions.

var sum = 0;
jQuery('.data-single').each(function(){
    var findProject = jQuery(this).find('.data-value').text().replace('$', ''); 
    if(!isNaN(this.value) && this.value.length!=0) {
        sum += parseFloat(this.value);
    }
});

.wrapper{
        max-width: 700px;
    }
    .set-column{
        display: inline-block;
        width: 100%;
        vertical-align: top;
    }
    .set-column > div{
        width: 33.33%;
        float: left;
    }
    .data-single{
        display: flex;
        justify-content: space-between;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="data-list">
        <div class="data-single set-column">
            <div class="data-name">Product 1</div>
            <div class="data-value">$45</div>
            <div class="data-sell">1200 Sales</div>
        </div>
        <div class="data-single set-column">
            <div class="data-name">Product 2</div>
            <div class="data-value">$24</div>
            <div class="data-sell">31 Sales</div>
        </div>
        <div class="data-single set-column">
            <div class="data-name">Product 3</div>
            <div class="data-value">$12</div>
            <div class="data-sell">4 Sales</div>
        </div>
        <div class="data-single set-column">
            <div class="data-name">Product 4</div>
            <div class="data-value">$100</div>
            <div class="data-sell">12 Sales</div>
        </div>
    </div>
    <div class="set-column" style="font-weight: bold;"> 
        <div class="total-price">
            Final Amount - Value1 * Value2 
        </div>
        <div class="total-sell">
            Total Price - Value1
        </div>
        <div class="total-price">
            Total Sell - Value2
        </div>
    </div>
</div>

A suggestion. You may also store the price and sales in the attribute of the div instead of extracting the plain text of $xxx and xxxx sales. — ikhvjs
– ikhvjs, Commented Sep 3, 2021 at 7:45

Dmytro · Accepted Answer · 2021-09-03 07:46:11Z

I solved the issue for you. You can see the code below:

var totalPrice = 0, totalSell = 0;

    $('.data-value').each(function(index, elm){
        const val = $(elm).text().replace('$', '')
        totalPrice += parseInt(val)
    });
    $('.data-sell').each(function(index, elm){
        const val = $(elm).text().replace(' Sales', '')
        totalSell += parseInt(val)
    });
    $('.total-price').text(totalPrice)
    $('.total-sell').text(totalSell)
    $('.final-amount').text(totalPrice * totalSell)

.wrapper{
            max-width: 700px;
        }
        .set-column{
            display: inline-block;
            width: 100%;
            vertical-align: top;
        }
        .set-column > div{
            width: 33.33%;
            float: left;
        }
        .data-single{
            display: flex;
            justify-content: space-between;
        }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="wrapper">
        <div class="data-list">
            <div class="data-single set-column">
                <div class="data-name">Product 1</div>
                <div class="data-value">$45</div>
                <div class="data-sell">1200 Sales</div>
            </div>
            <div class="data-single set-column">
                <div class="data-name">Product 2</div>
                <div class="data-value">$24</div>
                <div class="data-sell">31 Sales</div>
            </div>
            <div class="data-single set-column">
                <div class="data-name">Product 3</div>
                <div class="data-value">$12</div>
                <div class="data-sell">4 Sales</div>
            </div>
            <div class="data-single set-column">
                <div class="data-name">Product 4</div>
                <div class="data-value">$100</div>
                <div class="data-sell">12 Sales</div>
            </div>
        </div>
        <div class="set-column" style="font-weight: bold;"> 
            <div>
                Final Amount - <span class="final-amount"> </span>
            </div>
            <div>
                Total Price - $<span class="total-price"> </span>
            </div>
            <div>
                Total Sell -  <span class="total-sell"> </span>
            </div>
        </div>
    </div>

Collectives™ on Stack Overflow

How to get sum of each data using jQuery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related