jQuery сумма каждой новой созданной строки

Question

Im пытается вычислить ввод val() на каждую строку, в настоящее время он вычисляет только 1-й ряд, пожалуйста, помогите, спасибо!

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); 

}); 

FIDDLE

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); 

}); 

Demo: Fiddle

Answer 2

Вот что я придумал:

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

Fiddle: http://jsfiddle.net/maniator/Wn2cs/11/

Answer 3

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

Answer 4

Краткий вариант. Включает немного кода для автоматической обработки новых строк в качестве бонуса.

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