循環屬性中的javascript sum值

Question

我有2種類型的行（基本行和附加行）。 我需要按屬性“數據類型”分組的輸入值的總和

<div class="row-item" data-type="Basic"><input type="number" value="2" class="number-input"></div>
<div class="row-item" data-type="Basic"><input type="number" value="5" class="number-input"></div>
<div class="row-item" data-type="Basic"><input type="number" value="3" class="number-input"></div>
<div class="row-item" data-type="Basic"><input type="number" value="4" class="number-input"></div>
<div class="row-item" data-type="Extra"><input type="number" value="3" class="number-input"></div>
<div class="row-item" data-type="Extra"><input type="number" value="5" class="number-input"></div>

我需要數組的對象：

Basic => sum : 14,
Extra => sum : 8

我嘗試了一些東西，但沒有用...

data = {};
$(".row-item").each(function (index, elem) {

    var type = $(elem).data('type');
    count = $(elem).find(".number-input").val();
    sum += count;

    data[type] = {
        sum: sum
    };
});

Answer 1

您可以在選擇器中使用data-type值來選擇特定的值。

var basic = 0;
$('.row-item[data-type="Basic"]').each(function () {
    basic += parseInt($(this).find('input').val(), 10) || 0;
});


var extra = 0;
$('.row-item[data-type="Extra"]').each(function () {
    extra += parseInt($(this).find('input').val(), 10) || 0;
});

alert(basic + ' ' + extra);

演示： http : //jsfiddle.net/tusharj/773va00j/

編輯

var obj = {
    Basic: 0,
    Extra: 0
};

$('.row-item[data-type]').each(function () {
    obj[$(this).data('type')] += parseInt($(this).find('input.number-input').val(), 10);
});

console.log('Basic ' + obj.Basic);
console.log('Extra ' + obj.Extra);

演示： http : //jsfiddle.net/tusharj/773va00j/1/

Answer 2

另一種方法如下。 如果需要的話，這還將允許您擁有更多的類型。

 var data = {}; $(".row-item").each(function(index, elem) { var type = $(elem).data('type'); var count = parseInt( $(elem).find(".number-input").val(), 10 ); if (data.hasOwnProperty(type)) { data[type]["sum"] += count; } else { data[type] = {"sum": count}; } }); alert (JSON.stringify(data, null, 4)); //console.log(data); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row-item" data-type="Basic"><input type="number" value="2" class="number-input"></div> <div class="row-item" data-type="Basic"><input type="number" value="5" class="number-input"></div> <div class="row-item" data-type="Basic"><input type="number" value="3" class="number-input"></div> <div class="row-item" data-type="Basic"><input type="number" value="4" class="number-input"></div> <div class="row-item" data-type="Extra"><input type="number" value="3" class="number-input"></div> <div class="row-item" data-type="Extra"><input type="number" value="5" class="number-input"></div>