我可以使用 jquery .each() 来计算表单中的每一行吗？答案

【问题标题】：Can I use jquery .each() to calculate each row in a form?我可以使用 jquery .each() 来计算表单中的每一行吗？
【发布时间】：2015-07-12 21:02:14
【问题描述】：

我正在创建一个表格，用于计算项目每行的总数。

我已经使用了一段 javascript 来单独计算每一行，但我想知道我是否可以使用 .each() 来计算具有相同类的每一行，而不是为每一行使用一个唯一的脚本身份证。

脚本应该是：（类“price1”的p元素中的价格）*（类“qty1”的输入元素中的值）。结果需要进入类为“total1”的输入元素

我的页面是http://www.catering-equipment.co.uk/portal1/ 我在这里创建了一个 JSFiddle --> https://jsfiddle.net/1y7kudtv/4/

$(".qty1").on('keyup', function () {
    // alert('pressed')
    var total = $(".price1").html() * $(this).val()
    $(".total1").val(total);
})

你可以看到我对 javascript 代码的尝试，但它只有在我使用唯一 ID 而不是类时才有效。

提前谢谢你。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

使用.closest():

$(this).closest('.itemrow').find('.total1').val(total);

DEMO

【讨论】：

嗨，这仅采用 .price1 的第一个实例，这意味着，在我的示例中，每一行都是 *2.17
就用同样的逻辑？ $(this).closest('.itemrow').find('.price1')DEMO
这很完美！太感谢了！一直试图弄清楚几个小时！ :)

【解决方案2】：

是的，你可以这样做。使用find 仅在当前选择器中查找元素：

$('.itemrow').each(function() {
    var price = $(this).find('.price1').html();
    var quantity = $(this).find('.qty1').val();

    var total = price * quantity;

    $(this).find('.total1').val(total);
});

还请注意，您在这里处理的是浮点算术，因此最好对总数进行四舍五入，以避免显示类似 10.99999999 的内容：

var total = (price * quantity).toFixed(2);

【讨论】：

我添加了这个，它不像 on keyup 那样实时计算。我将如何实现这一点？