Average a group of results

Question

I have a group of results and need to calculate their average, how do I do it in jQuery?

The elements are already in variables and separated by classes, for example:

deztotal = parseInt($this.find( ".dezmembros" ).html());

my HTML:

<input type="text" id="tabelainput" class="setmembros" maxlength="3" name="setmembros"  value="10" disabled>
<input type="text" id="tabelainput" class="outmembros" maxlength="3" name="outmembros"  value="15" disabled>
<input type="text" id="tabelainput" class="novmembros" maxlength="3" name="novmembros"  value="15" disabled>
<input type="text" id="tabelainput" class="dezmembros" maxlength="3" name="dezmembros"  value="12" disabled>

Answer 1

If you already have values in classes, jQuery already returns something that looks like an array, with all occurrences of that class... The classic method for dealing with this is the .each(),

var tot = 0;
var n = 0;
$('.m').each(function(){
   tot += parseInt( $(this).text() );
   n++;
});
var MEDIA = tot/n;

However, for something as simple as calculating an average, the ideal would be to actually use an array, and this is also possible in jQuery, using the function makeArray(),

var A = $.makeArray( $('.m') );
var Atot = 0;
for(i=0; i<A.length; i++)
    Atot += parseInt(A[i].innerHTML);
var Amedia = Atot/A.length;

See http://jsfiddle.net/P3MhH/

---

NOTES

Javascript is not a language equipped with map/reduce to deal elegantly with arrays, but today, even with a small cost of performance, it is already possible to make use of array filter and aggregation functions. The average is a typical aggregate, and can be expressed with these resources, see this other jsFiddle:

var A = $.makeArray( $('.m') ).map(function(a) {
    return parseInt(a.innerHTML)
}); // ou $('.m').map(function(){ return  parseInt($(this).html()) }).get();
var soma = A.reduce(function(a,b) {return a + b});
var media = soma / A.length;

This way of expressing an array algorithm is still little used, some people find unintelligible, "mathematical thing"... I try to avoid prejudices. One can, for example, use in formal specifications.

---

Access to tag values <input>, the easiest in jQuery is the .val... For other tags (typically <span> as I exemplified in jsfiddle) the use of nodeValue can be faster, see https://stackoverflow.com/a/18418270/287948

Answer 2

Only evidencing my comment earlier in a reply as such.

There are two points that need to be checked to achieve your goal.

The first and most important is to use jQuery.val() because you want to take the value of the field and not the HTML inside it (which doesn’t even exist). You could even use jQuery.attr(), but let’s hammer the nail and not screw it.

The second point is the selector to be used. You have demonstrated to be using the class of the elements, but used a class applied to only a single element. Even if you correct the aforementioned point, you will only receive 12, for the last field, and not 52 as expected sum.

Unfortunately there is no native way to add N fields automatically, so you will have to iterate. So much so that until mathematical plugins do so.

Demo no Fiddle

If you can’t modify the HTML (which I think is rather unlikely), you can use the same poorly formulated HTML by simply changing the selector.

Demo no Fiddle

The idea here is to use the ability of the selectors accept some special formats as a Regular Expression.

When using input[name$=membros] restrict routine to items whose attribute name end with the expression members. As they all end up like this, we keep the result 52.