javascript - 遍历无序列表并在每个节点上执行操作Javascript

我的商店里有产品清单。每个产品的价格都以div为单位。我需要找到每种产品的价格，并计算出30％的销售价格，然后将其附加到红色的价格中。

我可以为此进行DOM操作，但无法弄清楚如何对产品进行循环。下面的代码将仅第一个产品的销售价格附加到列表中的所有产品。

工作小提琴：
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 );

最佳答案

您需要使用.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>