0

Tenho um grupo de resultados e preciso calcular a média deles, como faço isso em jQuery?

Os elementos já estão em variaveis e separados por classes, exemplo:

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

meu 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>
10
  • O que está dentro do html? numeros? E quantos .deztotal pode haver? só um?
    – Sergio
    Commented 19/07/2014 às 0:07
  • 1
    Coloque o seu HTML e vai ter uma resposta, assim é dificil adivinhar como está o seu HTML.
    – Sergio
    Commented 19/07/2014 às 0:12
  • 1
    Some tudo e divida por 12, ué!
    – bfavaretto
    Commented 19/07/2014 às 0:26
  • 2
    Ops, seu HTML esta meio inconsistente.. alem de comprometer o uso do atributo id (precisa ser único), não está usando a mesma classe para todos os itens da média desejada. Commented 19/07/2014 às 0:59
  • 2
    O problema aí é que você deve usar jQuery.val() e não jQuery.html(). Se qusier que seja dinâmico (não apenas 12) divida pelo valor da propriedade length. apenas cuidando para não ser por zero. E Caso não seja possível mudar o HTML (que eu duvido) pode ao invés de buscar pela class, buscar pelo atributo name. Commented 19/07/2014 às 1:00

2 Respostas 2

5

Se você já tem os valores em classes, o jQuery já devolve algo que se parece com uma array, com todas as ocorrências dessa classe... O método clássico para lidar com isso é o .each(),

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

Todavia, para algo tão simples quanto o cálculo de uma média, o ideal seria usar realmente uma array, e isso também é possível no jQuery, usando a função 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;

Ver http://jsfiddle.net/P3MhH/


NOTAS

O Javascript não é era uma linguagem equipada com map/reduce para lidar elegantemente com arrays, mas hoje, mesmo com um pequeno custo de performance, já é possível fazer uso de funções de filtro e agregação das arrays. A média é um agregado típico, e pode ser expressa com esses recursos, veja esse outro 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;

Essa forma de expressar um algoritmo de arrays ainda é pouco usada, tem gente que acha ininteligivel, "coisa de matemático"... Tento evitar os preconceitos. Pode-se, por exemplo, usar em especificações formais.


Quanto ao acesso aos valores de tags <input>, o mais fácil no jQuery é o .val... Para outras tags (tipicamente <span> como exemplifiquei no jsfiddle) o uso de nodeValue pode ser mais rápido, ver https://stackoverflow.com/a/18418270/287948

1
  • muito boa resposta!!! valew!!
    – Alan PS
    Commented 19/07/2014 às 0:59
2

Apenas evidenciando meu comentário anterior numa resposta propriamente dita.

Existem dois pontos que precisam ser verificados para atingir seu objetivo.

O primeiro e mais importante é usar jQuery.val() pois você que pegar o valor do campo e não o HTML dentro dele (que sequer existe). Você até poderia usar jQuery.attr(), mas vamos martelar o prego e não parafusá-lo.

O segundo ponto é o seletor a ser usado. Você demonstrou estar usando a class dos elementos, mas usou uma class aplicada à apenas um único elemento. Mesmo que você corrija o ponto anteriormente citado, você só vai receber 12, referente ao último campo, e não 52 como somatório esperado.

Infelizmente não existe uma forma nativa de se somar N campos automaticamente, então você vai ter de iterar. Tanto é verdade que até plugins matemáticos fazem assim.

Demo no Fiddle

Se, porventura, você não puder modificar o HTML (o que eu acho bastante improvável), você pode sim usar o mesmo HTML mal formulado, bastando alterar o seletor.

Demo no Fiddle

A idéia aqui é valer-se da habilidade de os seletores aceitarem alguns formatos especiais como que numa Expressão Regular.

Ao usar input[name$=membros] restringimo a rotina aos elementos cujo atributo name terminem com a expressão membros. Como todos eles terminam assim, mantemos o resultado 52.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .