jquery-对每个产品使用.each（）一次以插入新价格

嗨，我遇到了问题。每个（）对它所查看的每个元素触发一次

因此，在电子商务网站上有一个包含产品列表的页面，每个产品都有一个包含div#productListings.productListItem，在该div中有一些数据，包括price.itemPrice

我试图让它在每个包含div的产品中查看，取价格，除以20%，然后在下面显示新价格：

$( "#productListings .productListItem" ).each(function() {
  var PLPpriceStripped = ($('.itemPrices .pri', this).text()).replace(/[^0-9.]/g, '');
  var PLPdiscount = (PLPpriceStripped/100)*20;
  var PLPnewPrice = PLPpriceStripped-PLPdiscount;

  $('<div class="nowPrice">' + 'Discounted Price*: £' + PLPnewPrice + '</div>').insertAfter('.itemPrice', this);
});

当时是20英镑，现在是15英镑
现在是20英镑
现在是50英镑
当时是50英镑，现在是30英镑

如果查询选择器工作正常，您应该尝试

.append（）

而不是

.insertAfter（）

：

$（“#productListings.productListItem”）.each（函数（）{
// ...
var nowPrice=$（“+”折扣价格*：£”+PLPnewPrice+”）；
$（this）.append（nowPrice）；
});

有几个问题：

insertAfter

参数中的类规范缺少“s”。它应该是

.itemPrices

，而不是

.itemPrice

不需要第二个参数，因此您添加的内容比您想要的多得多。改用：

.insertAfter($('.itemPrices', this))

CSS类

nowPrice

不足以使附加内容可见，因为父元素具有CSS

字体大小：0

，这类似于“我如何让自己的生活变得困难！？”。无论如何，有了这样的字体大小，你就看不到小提琴中的额外内容了。最快的解决方案是为

nowPrice

CSS类指定字体大小

以下是更新的小提琴：

还有这个片段：

$（文档）.ready（函数（）{
$（“#productListings.productListItem”）。每个（函数（）{
var plppricestriped=（$（'.itemPrices.pri'，this）.text（））.replace（/[^0-9.]/g'）；
变量PLPdiscount=（plpplicestripted/100）*20；
var PLPnewPrice=PLPPRICED PLPdiscount；
美元（“+”折扣价格*：£“+PLPnewPrice+”）。插入后面（$（“.itemPrices”，this））；
});
});
#产品列表{
显示：块；
字号：0；
}
#productListings.productListItem{
显示：内联块；
利润率：1%；
宽度：48%；
}
#productListings.productListItem img{
显示：块；
宽度：100%；
}
#productListings.productListItem.prices{
显示：块；
填充：10px；
}
#productListings.productListItem.was{
显示：内联块；
填充：10px；
文字装饰：线条贯通；
字体大小：12px；
}
#productListings.productListItem.pri{
显示：内联块；
填充：10px；
字体大小：12px；
}
.nowPrice{
显示：块；
填充：10px；
字体大小：12px；
}

当时是20英镑，现在是15英镑
现在是20英镑
现在是50英镑
当时是50英镑，现在是30英镑
你能分享你的HTML代码吗？添加代码片段以获得更好的解释…据我所知，不需要第二个参数，因此你添加的内容比你想要的多得多。改为使用：
.insertAfter（$（'.itemPrice'，this））
添加完整的代码片段，以便我们可以查看…查看我的答案。。。尽管我从未用你提供的小提琴得到过0英镑。
$（“#productListings”）
将始终是一个元素（id需要唯一）。所以不需要使用each循环来迭代。您还以错误的方式使用了each循环。OP选择器是正确的。当然，如果您在代码中进行了调查，您会注意到这是一个复制粘贴错误
each（）
需要一个函数作为参数。不过还是要谢谢你。我投了反对票，因为你的答案语法不正确。在发布之前测试代码是个好主意。代码片段非常适合这样做。因为你编辑了你的答案，我删除了我的否决票。很抱歉，我早班工作，所以在收到你的答复之前离开了，这确实有帮助。我缺少的主要内容是.insertAfter（$（'.itemPrice'，this）），但是价格问题实际上与你的想法相反，实际上，在这个变量中没有额外的“s”：var plppricestriped=（$（'.itemPrices.pri'，this）.text（））.replace（/[^0-9.]/g'）；所以它没有执行这一部分，这就是为什么我得到了0英镑的值。我需要弄清楚的最后一部分是如何得到显示的.00便士小数，但感谢您帮助整理了主要问题：）@Chobbit，如果要从
.itemPrices
中删除
s
，那么别忘了调整HTML，正如在您的问题中一样，HTML指定了
class=“itemPrices”
。也许你的问题和小提琴又错了？注意：要显示小数，请查看该方法。
.insertAfter($('.itemPrices', this))