Somme de valeurs de différentes divs avec la même classe

Je charge dynamicment les divs qui ont une classe .totalprice . À la fin, je voudrais résumer les valeurs de tous les .totalprice .

Pour les

éléments:

 var sum = 0; $('.totalprice').each(function(){ sum += parseFloat($(this).text()); // Or this.innerHTML, this.innerText }); 

Vous pouvez voir un exemple de travail ici

Pour les éléments (entrées, cases à cocher, etc.):

 var sum = 0; $('.totalprice').each(function(){ sum += parseFloat(this.value); }); 

Si vous recherchez un entier, vous pouvez également utiliser la fonction parseInt() .

Vous pouvez voir un exemple de travail de ceci ici .

Sauf si vous êtes absolument certain de la valeur de votre contenu, vous ne pourrez pas utiliser parseFloat hors de la boîte.

Vous devez être sûr de gérer:

  • Espace blanc excessif
  • Diriger $
  • Les blancs
  • Cordes inattendues

Regarde:

 
$1.25
0.25
$3.00
2.50
$0.01

Les éléments suivants traiteront tous les cas:

 var sum = 0; $(".totalprice").each(function() { var val = $.sortingm( $(this).text() ); if ( val ) { val = parseFloat( val.replace( /^\$/, "" ) ); sum += !isNaN( val ) ? val : 0; } }); console.log( sum ); 

Voir aussi: http://jsfiddle.net/rwaldron/hfA5V/

Pour construire sur ce que Rionmonster a fait, cela fonctionne pour moi:

HTML:

 
6.7
8.9
4.5

JavaScript:

 var sum = 0; $('.totalprice').each(function() { sum += parseFloat($(this).text()); }); alert(sum); 

Sortie:

 21.1 

Je trouve que pour obtenir la valeur d’un

vous devez utiliser le sélecteur .text() . Voici le violon pour le voir fonctionner: http://jsfiddle.net/davecoulter/7D7nR/

 (function( $ ){ $.fn.sum=function () { var sum=0; $(this).each(function(index, element){ if($(element).val()!="") sum += parseFloat($(element).val()); }); return sum; }; })( jQuery ); alert($('.abcd').sum()); 
    

Si vous faites cela très souvent dans votre code, il est recommandé de le mettre dans une fonction réutilisable

 function removeComma(x) { if (x) { if (x.length > 0) { return x.replace(/,/g,''); } } } function sum_class(list,source) { // source can be text for non input DOM elements or value for text inputs var total = 0; $(list).each(function() { if (source == 'text') { total += parseFloat(removeComma($(this).text())); } else { total += parseFloat(removeComma($(this).val())); } }); return total; } 

N’oubliez pas que les deux fonctions utilisent des variables dont le nom correspond à ce qui a du sens pour moi. Vous pouvez les renommer en fonction de ce que vous pensez mieux fonctionner. Par exemple, le nom de la fonction sum_class ne fait pas référence à une classe POO, mais le Le but de la fonction est de renvoyer le total des valeurs des éléments appartenant à la même classe.