jQuery每个新创建行的总和

我正在尝试计算每行的输入

val（）

，目前它只计算第一行，请帮助，谢谢

HTML

<a href="#" class="new">new</a>
<ul class="container"></ul>
<span class="all"></span>

JS

$('.new').click(function(){
    $("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});

$('.container').on('keyup', 'input', function(){

  var a = 0;
  var b = 0;
  var c = 0;
  var d = 0;

  $('ul li').each(function(){
    $(this).parent().find('li input').each(function(){
      a = parseInt($('.inputA').val());
      b = parseInt($('.inputB').val());
      c = a+b;
        $(this).parent().find('p span').html(c);
    });
    d += c;
  });

  $('.all').html(d);

});

$（'.new'）。单击（函数（）{
$（“ul”）。追加（“
总计：
”）；
});
$（'.container'）。在（'keyup'，'input'，function（）上{
var a=0；
var b=0；
var c=0；
var d=0；
$（'ul li'）。每个（函数（）{
$（this）.parent（）.find（'li input'）.each（function（））{
a=parseInt（$（'.inputA'）.val（））；
b=parseInt（$（'.inputB'）.val（））；
c=a+b；
$（this.parent（）.find（'p span'）.html（c）；
});
d+=c；
});
$（'.all'）.html（d）；
});

使用

$('.new').click(function () {
    $("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});

$('.container').on('keyup', 'input', function () {

    var d = 0;
    $('.container li').each(function () {
        var $this = $(this),
            a = parseFloat($this.find('.inputA').val()) || 0,
            b = parseFloat($this.find('.inputB').val()) || 0
        var subTotal = a + b;
        $this.find('span').text(subTotal);
        d += subTotal;
    })

    $('.all').html(d);

});

$（'.new'）。单击（函数（）{
$（“ul”）。追加（“
总计：
”）；
});
$（'.container'）。在（'keyup'，'input'，函数（）上{
var d=0；
$（'.container li'）。每个（函数（）{
变量$this=$（this），
a=parseFloat（$this.find（'.inputA'）.val（））| | 0，
b=parseFloat（$this.find（'.inputB'）.val（））|| 0
var小计=a+b；
$this.find（'span'）.text（小计）；
d+=小计；
})
$（'.all'）.html（d）；
});

---

演示：

以下是我的想法：

$('.new').click(function () {
    $("ul").append($('<li>', {
        html: [
            $('<input>', {class: 'inputA'}),
            $('<input>', {class: 'inputB'}),
            $('<span>', {class: 'total'})
        ]
    }).data('total', 0)); //set list item total to ZERO
});

$('.container').on('keyup', 'input', function () {
    var other_input = $(this).siblings('input');
    var totalEl = $(this).siblings('.total');
    var total = parseInt(this.value);
    var list_item = $(this).parents('li');
    total += parseInt(other_input.val());
    totalEl.text(total); //show new total
    list_item.data('total', total); //set list item's total

    var real_total = 0;
    var allEl = $('.all');
    list_item.parent().find('li').each(function(){
        var t = $(this).data('total');
        real_total += t;
    }); //tally up all list item totals
    allEl.text(real_total); //display the total total
});

$（'.new'）。单击（函数（）{
$（“ul”）。追加（$（“
”{
html:[
$（''，{class:'inputA'}），
$（''，{class:'inputB'}），
$（''，{class:'total'}
]
}).data（'total'，0））；//将列表项总计设置为零
});
$（'.container'）。在（'keyup'，'input'，函数（）上{
var other_input=$（this）.SIBLINES（'input'）；
var totalEl=$（this.sibbines（'.total'）；
var total=parseInt（此.value）；
var list_item=$（this.parents（'li'）；
total+=parseInt（other_input.val（））；
totalEl.text（总计）；//显示新总计
list_item.data（'total'，total）；//设置列表项的总数
var real_total=0；
var allEl=$（'.all'）；
list_item.parent（）.find（'li'）。每个（函数（）{
var t=$（this.data（'total'）；
实际_总+=t；
})；//汇总所有列表项总计
allEl.text（real_total）；//显示总数
});

小提琴：

$（'.new'）。单击（函数（）{
$（“ul”）。追加（“
总计：
”）；
});
$（'.container'）。在（'keyup'，'input'，函数（）上{
var合计=0；
$（'ul li'）。每个（函数（）{
var a=parseInt（$（this）.find（'.inputA'）.val（），10）| | 0；
var b=parseInt（$（this）.find（'.inputB'）.val（），10）| | 0；
$（this.find（'p span'）.html（a+b）；
总数+=（a+b）；
});
$（'.all'）.html（总计）；
});

---

一个简洁的版本。包括一点代码来自动处理新行作为奖励

$('.new').click(function () {
    $("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});


$(document).on("blur","input.inputB",function () {
    $('.new').click();
});

$('.container').on('keyup', 'input', function (e) {

    //var code = e.keyCode || e.which;

    var d = 0;

    $('ul li').each(function () {
        a = parseInt($(this).find('input.inputA').val());
        b = parseInt($(this).find('input.inputB').val());
        c = a + b;
        $(this).find('p span').html(c);
        d += c;
    });


    $('#all').html(d);

});

$（'.new'）。单击（函数（）{
$（“ul”）。追加（“
总计：
”）；
});
$（document）.on（“blur”，“input.inputB”，函数（）{
$（'.new'）。单击（）；
});
$（'.container'）。在（'keyup'，'input'，函数（e）上{
//var代码=e.keyCode | | e.which；
var d=0；
$（'ul li'）。每个（函数（）{
a=parseInt（$（this.find（'input.inputA'）.val（））；
b=parseInt（$（this.find（'input.inputB'）.val（））；
c=a+b；
$（this.find（'p span'）.html（c）；
d+=c；
});
$（'#all'）.html（d）；
});

---

这可能是因为它选择了第一个

.inputA

和

.inputB

。除了这个问题，

$（'ul li'）。每个（

应该是

$（this）。孩子（'li'）。每个（

不要忘记parseInt（）基数。@j08691为什么需要基数？只是出于好奇，为什么

$this=$（this）

？另外，逗号分隔的语法是如何工作的？它有什么优点？

$('.new').click(function () {
    $("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});


$(document).on("blur","input.inputB",function () {
    $('.new').click();
});

$('.container').on('keyup', 'input', function (e) {

    //var code = e.keyCode || e.which;

    var d = 0;

    $('ul li').each(function () {
        a = parseInt($(this).find('input.inputA').val());
        b = parseInt($(this).find('input.inputB').val());
        c = a + b;
        $(this).find('p span').html(c);
        d += c;
    });


    $('#all').html(d);

});