javascript - 具有相同类的多个条目的 parseFloat

Question

我有一个类别页面，其中显示不同的产品。在每个产品中，我都有一个部分显示原价、保存价格 和新价格。只是为了说明原价的结构:

<p class="old-price">
    <span class="price-label">Was</span>
    <span class="price" id="old-price-65848">
        <span class="price">
            <span class="currency">£</span>
        </span> 
    </span>
</p>

目前在使用 jQuery 的产品页面上，我可以获得价格并将其转换为数字:

var oldPrice = parseFloat(jQuery('.old-price .price .price').first().text().replace(/[^0-9\.]+/g, ""), 10);

在只有一个 Was Price block 的产品页面上一切正常。但是，当我转到类别页面时，我有多个 block 使用相同的结构和相同的类，上面的代码只选择第一个 block 并忽略其余部分。这可以很容易地显示使用:

console.log(oldPrice, "%");

我怎样才能修改代码，让它在类别页面上获取所有的 Was Price？

编辑:

我已经设法使用波纹管代码映射旧价格和保存价格。但是我正在尝试执行条件为的数学函数:

var oldPrices = jQuery('.old-price .price .price').map(function(){
    return parseFloat(jQuery(this).text().replace(/[^0-9\.]+/g, ""), 10);

}).get();

var specialPrices = jQuery('.special-price .price .price').map(function() {
    return parseFloat(jQuery(this).text().replace(/[^0-9\.]+/g, ""), 10);

}).get();

var youSave = specialPrices / (oldPrices / 100);

不幸的是它返回 NaN 值

PS:所有价格都是动态生成的。

谢谢

Answer 1

你可以映射它得到一个数组:

var oldPrices = jQuery('.old-price .price .price').map(function(){
    return parseFloat($(this).text().replace(/[^0-9\.]+/g, ""), 10);
}).get();

console.log(oldPrices);

也就是说，你最好设置一个data-*属性来处理特定于每个元素的旧价格，例如:<p class="old-price" data-old-price="12345"> .

顺便说一句，您的代码段似乎与您发布的 HTML 标记无关，那里没有旧的价格值可以检索，除了可能与 ID 属性有关。