Question

我有一个产品网格，我想迭代它并为每个div创建一个新变量，称为折扣。

我遇到的问题是能够独立访问每个div，并运行操作以获得折扣百分比。目前，我的输出是每个产品下列出的每个百分比折扣，而不是特定div的折扣价值。

我想我需要改变每个功能，不过我不确定下一步。

<div class="product">
<div class="text">
<span class="red">60</span>
<span class="grey">100</span>
</div>
</div>
<div class="product">
<div class="text">
<span class="red">40</span>
<span class="grey">100</span>
</div>
</div>

$('.product').each(function() {
    var org = $(this).find(".text .grey").html().replace("$","").replace("WAS","");
    var nwp = $(this).find('.text .red').html().replace("$","").replace("WAS","");
    var OrigPrice = parseFloat(org);
    var NewPrice = parseFloat(nwp);
    var discount = ((((NewPrice/OrigPrice)-1)*-1)*100).toFixed(0);
    $('<p>' + discount +' % off </p>').insertAfter('.grey');

});

当前输出

<div class="product">
<div class="text">
<span class="red">60</span>
<span class="grey">100</span>
<p>"40 % off"</p>
<p>"60 % off"</p>
</div>
</div>
<div class="product">
<div class="text">
<span class="red">40</span>
<span class="grey">100</span>
<p>"40 % off"</p>
<p>"60 % off"</p>
</div>
</div>

Answer 1

您需要在$(this)来电中使用insertAfter()，因此它只会添加到当前的DIV中。就像您在org和nwp中获取输入值一样。

$('<p>' + discount +' % off </p>').insertAfter($(this).find('.text .grey'));

Answer 2

执行.insertAfter('.gray')时，您要告诉jQuery查找包含gray类的DOM内的所有元素。这意味着，对于每个产品，您都在寻找具有灰色类的所有元素，并添加新的<p>元素。如果您有N个产品，您将获得N个折扣。

您想要的是找到产品的灰色类元素INSIDE：

$(this).find('.gray').after('<p>...</p>');

或者，您可以忽略灰色类并将新元素附加为产品的最后一个子元素：

$(this).append('<p>...</p>');

旁注：

您是否考虑过任何双向绑定框架（例如Angular）？

Jquery - 每个 - 返回独立的值

2 个答案: