valore della somma di elementi all'interno di un div con jQuery

Question

sto facendo un ordinamento di un insieme di utenti, ho 4 gruppi in questo modo (2): mostrato

<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> 
... 

Ora quello che vorrei fare riassume i valori delle abilità per ogni gruppo, al volo quando vengono ordinati.

mio ordinamento script di jQuery è qui:

$(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(); 

       } 
      } 
     ); 
    } 
); 

Vorrei essere in grado di 'su goccia' dell'elemento, riassumere tutti i totali in ogni 'squadra'. In modo che chiunque generi i gruppi ottenga sempre l'abilità corretta totale per gruppo.

io non sono il più grande utilizzatore di jQuery ancora, ma cercando di praticare di più con elementi ordinabili come questo.

EDIT
ho modificato il mio html per includere un <div class='teamskill'></div> sotto ogni elemento <div id="team#"></div> (che contiene i membri).

volevo avere teamskill essere aggiornato (il contenuto di esso, almeno).

Così ho modificato il codice jQuery a guardare in questo 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(); 

       } 
      } 
     ); 
    } 
); 

Tuttavia, io alla fine con solo il primo elemento <div class='teamskill'></div> aggiornamento, nessun altro quelli (per le altre squadre). Pensieri?

Answer 1

qualcosa di simile sarebbe inserire un div contenente Total: # dopo ogni gruppo:

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

È possibile regolare il markup, ecc ... basta regolarlo in base a ciò che si vuole fare con il totale.