Sum value of elements inside of a div using jquery

Question

I'm doing a sorting of a set of users, I have 4 groupings like so (2 shown):

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

Now what I would like to do is sum up the skill values for each group, on the fly when they are being sorted.

My sorting jQuery script is here:

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

                }
            }
        );
    }
);

I would like to be able to 'on drop' of the element, sum up all the totals in every 'team'. So that whoever sorts the groups always gets the correct skill total per group.

I'm not the greatest user of jQuery yet, but trying to practice more with sortable elements like this.

EDIT
I modified my html to include a <div class='teamskill'></div> under each <div id="team#"></div> element (which contains members).

I wanted to have teamskill be updated (the content of it at least).

So I modified the jQuery code to look like so:

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

                }
            }
        );
    }
);

However, I end up with only the first element <div class='teamskill'></div> updating, no other ones (for other teams). Thoughts?

Answer 1

Something like this would insert a div containing Total: # after each group:

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

You can adjust the markup, etc...just adjust it based on whatever you want to do with the total.