valor de la suma de los elementos dentro de un div con jQuery

Question

que estoy haciendo un tratamiento de selección de un conjunto de usuarios, tengo 4 agrupaciones como modo (2): muestra

<div id="team1" class="groupWrapper"> 
    <div id="p1" class="groupItem"><div class="itemHeader"><div class="first">John</div><div class="skill">15</div></div></div> 
    <div id="p2" class="groupItem"><div class="itemHeader"><div class="first">Luke</div><div class="skill">5</div></div></div> 
    <div id="p3" class="groupItem"><div class="itemHeader"><div class="first">Mary</div><div class="skill">10</div></div></div> 
    <div id="p4" class="groupItem"><div class="itemHeader"><div class="first">Bob</div><div class="skill">25</div></div></div> 
</div> 

<div id="team2" class="groupWrapper"> 
    <div id="p5" class="groupItem"><div class="itemHeader"><div class="first">Ryn</div><div class="skill">35</div></div></div> 
    <div id="p6" class="groupItem"><div class="itemHeader"><div class="first">Kevin</div><div class="skill">15</div></div></div> 
    <div id="p7" class="groupItem"><div class="itemHeader"><div class="first">Susie</div><div class="skill">5</div></div></div> 
    <div id="p8" class="groupItem"><div class="itemHeader"><div class="first">Jill</div><div class="skill">5</div></div></div> 
</div> 
... 

Ahora lo que me gustaría hacer es resumir los valores de habilidad para cada grupo, sobre la marcha cuando se ordenan.

Mi clasificación guión jQuery está aquí:

$(document).ready(
    function() { 
     $('div.groupWrapper').Sortable(
      { 
       accept: 'groupItem', 
       helperclass: 'sortHelper', 
       activeclass : 'sortableactive', 
       hoverclass : 'sortablehover', 
       handle: 'div.itemHeader', 
       tolerance: 'pointer', 
       onChange : function(ser) 
       { 
       }, 
       onStart : function() 
       { 
        $.iAutoscroller.start(this, document.getElementsByTagName('body')); 
       }, 
       onStop : function() 
       { 
        $.iAutoscroller.stop(); 

       } 
      } 
     ); 
    } 
); 

me gustaría ser capaz de 'en caída' del elemento, sumar todos los totales en cada 'equipo'. De modo que quien ordena los grupos obtiene siempre el total de habilidades correcto por grupo.

No soy el mejor usuario de jQuery todavía, pero intento practicar más con elementos ordenables como este.

EDITAR
I modificado mi html para incluir un <div class='teamskill'></div> debajo de cada elemento <div id="team#"></div> (que contiene miembros).

Quería tener teamskill actualizarse (el contenido de la misma al menos).

Así que modifica el código jQuery para parecerse a modo:

$(document).ready(
    function() { 
     $('div.groupWrapper').Sortable(
      { 
       accept: 'groupItem', 
       helperclass: 'sortHelper', 
       activeclass : 'sortableactive', 
       hoverclass : 'sortablehover', 
       handle: 'div.itemHeader', 
       tolerance: 'pointer', 
       onChange : function(ser) 
       { 
$("div.groupWrapper").each(function() { 
    var total = 0; 
    $(this).find("div.skill").each(function() { 
    total += parseInt($(this).text()); 
    }); 
    $(this).find(".teamskill").html(total); 
}); 
       }, 
       onStart : function() 
       { 
        $.iAutoscroller.start(this, document.getElementsByTagName('body')); 
       }, 
       onStop : function() 
       { 
        $.iAutoscroller.stop(); 

       } 
      } 
     ); 
    } 
); 

Sin embargo, termino con sólo el primer elemento de actualización <div class='teamskill'></div>, no hay otros equipos (por otros). ¿Pensamientos?

Answer 1

Algo como esto sería insertar un div que contiene Total: # después de cada grupo:

$(".groupWrapper").each(function() { 
    var total = 0; 
    $(this).find(".skill").each(function() { 
    total += parseInt($(this).text()); 
    }); 
    $(this).append($("<div></div>").text('Total: ' + total)); 
}); 

Se puede ajustar el margen de beneficio, etc ... sólo ajustarlo sobre la base de lo que quiere hacer con el total.