javascript - 循环遍历无序列表并对每个节点执行操作Javascript

Question

我的商店中有一份产品列表。每个产品都有一个 div 价格。我需要找到每个产品的价格，并计算 30% 的销售价格，并将其附加到红色的价格中。

我可以为此进行 DOM 操作，但我不知道如何循环遍历产品。下面的代码仅将第一个产品的销售价格附加到列表中的所有产品中。

工作 fiddle : https://jsfiddle.net/m5fxnLqp/1/

示例 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>

这是 DOM 操作:

//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 );

Answer 1

您需要使用.each()来循环".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

注意:此代码将使用折扣后附加新价格

var priceDiscount = priceNum - priceNum * .30;

如果您只需要折扣，请将其返回到您的代码

var priceDiscount = priceNum * .30;

我认为你需要使用

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

而不是

$(this).append( formattedPrice );

$(this).append( formattedPrice );之间的差异和$(this).closest('product').append( formattedPrice );

$(this).append( formattedPrice );附加后的 html

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

$(this).closest('product').append( formattedPrice );附加后的 html

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