jQuery functions to add corresponding entries of lists

Thanks to this post, I was able to create a working piece of javascript that fits my needs. I have a div/ul/li based table where each "row" has 2 values that I want to have the sum for. Currently the code does exactly what I want, but somehow I have the feeling that the javascript is not coded in the most efficient way since I am repeating a lot of code. Any suggestions?



$(calculateSum1);
function calculateSum1() {
var sum1 = 0;
// searching li for equal class and add the values
$(".pr1").each(function() {
var value = $(this).text();
// add only if the value is number
if(!isNaN(value) && value.length != 0) {
sum1 += parseFloat(value);
}
});
$('#result1').text(sum1);
};

$(calculateSum2);
function calculateSum2() {
var sum2 = 0;
// searching li for equal class and add the values
$(".pr2").each(function() {
var value = $(this).text();
// add only if the value is number
if(!isNaN(value) && value.length != 0) {
sum2 += parseFloat(value);
}
});
$('#result2').text(sum2);
};

$(calculateSum3);
function calculateSum3() {
var sum3 = 0;
// searching li for equal class and add the values
$(".pr3").each(function() {
var value = $(this).text();
// add only if the value is number
if(!isNaN(value) && value.length != 0) {
sum3 += parseFloat(value);
}
});
$('#result3').text(sum3);
};

$(calculateSum4);
function calculateSum4() {
var sum4 = 0;
// searching li for equal class and add the values
$(".pr4").each(function() {
var value = $(this).text();
// add only if the value is number
if(!isNaN(value) && value.length != 0) {
sum4 += parseFloat(value);
}
});
$('#result4').text(sum4);
};
div.col, div.price {float:left}
div.col {width:25%;margin;none;}
ul {list-style-type: none;margin:0;}

• Price

150
199
249
299

• +

• +

• +

• +

• +

• Add costs

27
20
30
39

• =

• =

• =

• =

• =

• Totaal

-

-

-

-

I think you could rewrite the code in a shorter way.

You can write the calculateSum# function to be generic.

This you can do by providing the selector or directly the jQuery object you need to loop and sum values.

And instead to directly write the result, you could return the computation.

Of course you could pass the result selector or jQuery element and do the job, but if you return the result, the code is more changeble in the future.

Then you create an object literal with the keys as your element selector, and the values as the result element selector.

And finally create an anonymous function to pass on jQuery document ready step $(myFuncOnDocReadyHere...), where you put all together.

If you prefer to avoid sharing the object with elements you could place it inside the on doc ready function, to keep it "private".

Here is my changes:



var summableAndResult = {
".pr1": "#result1",
".pr2": "#result2",
".pr3": "#result3",
".pr4": "#result4"
}

function calculateSum ($list) {
var sum = 0;

$list.each(function() {
var value = $(this).text();
// test isNaN only if string is not empty
if (value.length != 0 && !isNaN(value)) {
sum += parseFloat(value);
}
});

return sum;
}

$(function(){

for(var el in summableAndResult) {
var sum = calculateSum($(el));
$(summableAndResult[el]).text(sum);
}

});
div.col, div.price {float:left}
div.col {width:25%;margin;none;}
ul {list-style-type: none;margin:0;}

• Price

150
199
249
299

• +

• +

• +

• +

• +

• Add costs

27
20
30
39

• =

• =

• =

• =

• =

• Totaal

-

-

-

-

StackExchange Code Review Q#135106, answer score: 6