Loop through unordered list and perform operation on each node Javascript

Question

I have a list of products in my store. Each product has a price in a div. I need to find the price of each product, and calculate a sales price of 30%, and append it to the price in red.

I can do the DOM manipulation for this, but I cant figure out how to loop over the products. This code below appends the sales price of ONLY the first product to all of the products in the list.

Working Fiddle: https://jsfiddle.net/m5fxnLqp/1/

Sample HTML:

<ul class="ProductList">
  <li class="product">
    <div class="ProductPrice">$9.99</div>
  </li>
  <li class="product">
    <div class="ProductPrice">$10.99</div>
  </li>
</ul>

Here is the DOM Manipulation:

//find the price and convert to decimal to work with
var price = $(".ProductPrice").text();
var priceFormat = price.replace("$", "");
var priceNum = parseFloat(priceFormat).toFixed(2);

//calculate the price discount 
var priceDiscount = priceNum * .30;
var priceFinal = priceDiscount.toFixed(2);

// Append the formatted price to the div
var formattedPrice = '<div style="color:red;"> $' + priceFinal + '</div>';
$(".ProductPrice").append( formattedPrice );

Here is a working example. I've modified the html a bit. Be sure to also check out the useful answers below. — Hunan Rostomyan
– Hunan Rostomyan, Commented Nov 30, 2015 at 22:27
Awesome, thanks guys. What about using pure JS. The each function makes it so easy, i was struggling to do this in a for loop! — user3869231
– user3869231, Commented Nov 30, 2015 at 23:21

Mohamed-Yousef · Accepted Answer · 2015-11-30 22:32:07Z

you need to use .each() to loop through ".ProductPrice"

//find the price and convert to decimal to work with
   $(".ProductPrice").each(function(){
        var price = $(this).text();
        var priceFormat = price.replace("$", "");
        var priceNum = parseFloat(priceFormat).toFixed(2);

        //calculate the price discount 
        var priceDiscount = priceNum - priceNum * .30;
        var priceFinal = priceDiscount.toFixed(2);

        // Append the formatted price to the div
        var formattedPrice = '<div style="color:red;"> $' + priceFinal + '</div>';
        $(this).append( formattedPrice );

    });

Working Demo Here

Note: This code will append the new price after discount by using

var priceDiscount = priceNum - priceNum * .30;

if you need just a discount return it back to your code

var priceDiscount = priceNum * .30;

and I think you need to use

$(this).closest('product').append( formattedPrice );

instead of

$(this).append( formattedPrice );

the deference between $(this).append( formattedPrice ); and $(this).closest('product').append( formattedPrice );

$(this).append( formattedPrice ); html after append

<div class="ProductPrice">
     $9.99
     <div style="color:red;"> $6.99</div>
</div>

$(this).closest('product').append( formattedPrice ); html after append

<li class="product">
    <div class="ProductPrice">$9.99</div>
    <div style="color:red;"> $6.99</div>
</li>

mejdev · Accepted Answer · 2015-11-30 22:26:38Z

0

I believe you are looking for the .each function: http://api.jquery.com/each/

answered Nov 30, 2015 at 22:26

mejdev

3,7584 gold badges26 silver badges41 bronze badges

Comments

Arash DaneshAraste · Accepted Answer · 2015-11-30 22:32:52Z

0

I update your code using each() function:

https://jsfiddle.net/m5fxnLqp/4/

Now it works.

answered Nov 30, 2015 at 22:32

Arash DaneshAraste

3931 silver badge12 bronze badges

Collectives™ on Stack Overflow

Loop through unordered list and perform operation on each node Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related