将 jquery 选择限制为特定形式

Question

我的页面上有多个表格，我很难从每个表格中获取值来提供各个表格的总计。 HTML 是动态生成的，我无法修改它。这是每个表格的样子（但每次我运行它都会有不同的行数....

<form>
<input type=number class="entries" onchange="addTotal();">
<input type=number class="entries" onchange="addTotal();">
<input type=number class="totals">
</form>

这是我必须添加每个表格并将总计放在 "totals" 框中的功能。这对于第一种形式非常有效，但问题是无论我输入哪种形式的值，它都会以顶部形式 "totals" 汇总所有内容。

function addTotal() {
  var entry = $('.entries').get();
  var total = 0;
  for (var i = 0; i < entry.length; i++) {
      if(Number(entry[i].value))
          total += Number(entry[i].value);
   }
   $('.totals').value = total;
  };

我也尝试摆脱 onchange 动作并尝试将每个表单称为 'this' 但我似乎无法通过这种方式获取所有值，我只得到一个数组...

$(.entries').change(function() {
var entry = ($(this.form).get());
  console.log(entry);
});

我确定我可能缺少一些明显的东西，但我似乎无法在这里得到我需要的东西。任何建议，将不胜感激！！

Answer 1

UPDATED 现在可以处理任意数量的字段这是一个fiddle：http://jsfiddle.net/vx403ax0/6/

$(document).ready(function () {
    $(".entries").change(function () {
        $("form").each(function () {
           var result = 0;
            $(this).find(".entries").each(function(i, el){
                result += parseInt(el.value);
            });
            if(isNaN(result)){
            return;
            } else{
           $(this).find(".totals").val(result);
            }
        });
    });
});

Answer 2

这可能效率不高，但可以完成工作。

$(document).ready(function () {
    $(".entries").change(function () {
        $("form").each(function () {
            $form = $(this);
            $val = 0;
            $form.find('input:not(.totals)').each(function (i, el) {
                if ($(el).val() !== '') {
                    $val += parseInt($(el).val());
                }
            });
            $form.find(".totals").val($val);
        });
    });
});

这是基于 ChrisJ 评论的 fiddle：http://jsfiddle.net/d9boLc13/

将 jquery 选择限制为特定形式

Limit jquery selection to specific form

forms

jquery

scope