Question

我在尝试替换计算值时遇到了一些麻烦。在此函数中，我们尝试使用隐藏文本框的值来计算折扣并将原始价格替换为新的折扣值。我可以获得折扣和价值，但它不会将值替换为div ...我认为我的“最接近”不起作用......任何想法我在这里做错了。

$(document).ready(function() {
    $("#cal_discount").click(function() {

        $(".price_val").each(function() {
            var Percent = $('#percent_dis').val();
            var price = $(this).val();
            var existing = $(this).closest('.existing_price');
            var new_price = (price - (price * (Percent / 100)));
            var formatted = new_price.toFixed(2);
            existing.text(formatted);
        });
    });
});

<div class="existing_price" style="float:left">22</div>
<input  type="hidden"  class="price_val" value="22" />

<input name="percent_dis" type="text" id="percent_dis" size="3" /> %      <img src="admin/images/btn/cal_discount.png" width="97" height="17" style="float:left; margin-right:10px; margin-top:5px; cursor:pointer" id="cal_discount" />

Answer 1

问题在于22后的</div>不应该在那里..

.closest()向上移动DOM层次结构..具有意义上的祖先......

所以它寻找匹配选择器的第一个祖先..

由于.price_val不在.existing_price内，因此无法找到它。

将代码更改为

<div class="existing_price" style="float:left">
  <span class="value">22</span>
  <input  type="hidden"  class="price_val" value="22" />
</div>

和js

    $(".price_val").each(function() {
        var Percent = $('#percent_dis').val();
        var price = $(this).val();
        var existing = $(this).siblings('.value');
        var new_price = (price - (price * (Percent / 100)));
        var formatted = new_price.toFixed(2);
        existing.text(formatted);
    });

会解决问题。

Answer 2

如果prev元素始终为.prev

，您需要div.existing_price不是最接近的

尝试

var existing = $(this).prev(); //should return div for your existing markup

Answer 3

最近只在元素是后代而不是兄弟的情况下才有效 - 请改用prev。

每个最近的Jquery，计算和替换值

3 个答案: