jquery - 每个新创建行的jQuery总和

Question

我试图计算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);

});

小提琴

Answer 1

利用

$('.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);

});

演示：小提琴

Answer 2

$('.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 total = 0;
    $('ul li').each(function () {
        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);
        total += (a + b);
    });
    $('.all').html(total);
});

jsFiddle 示例

Answer 3

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

$('.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);

});

[jsFiddle]

Answer 4

这是我想出的：

$('.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
});

小提琴：http: //jsfiddle.net/maniator/Wn2cs/11/