Суммирование значений элементов внутри div с использованием jquery

Question

Я делаю сортировку группы пользователей, у меня есть 4 группы, например: (100 показано):

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

Теперь я хотел бы суммировать значения навыков для каждой группы на лету, когда они сортируются.

Мой скрипт сортировки jQuery находится здесь:

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

                }
            }
        );
    }
);

Я бы хотел иметь возможность «по капле» элемента суммировать все итоги в каждой «команде». Так что, кто бы ни сортировал группы, всегда получает правильный общий уровень навыка на группу.

Я пока не лучший пользователь jQuery, но стараюсь больше практиковаться с такими сортируемыми элементами.

EDIT
Я изменил свой HTML, чтобы включить <div class='teamskill'></div> под каждым элементом <div id="team#"></div> (который содержит элементы).

Я хотел, чтобы teamskill был обновлен (хотя бы его содержимое).

Итак, я изменил код jQuery, чтобы он выглядел так:

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

                }
            }
        );
    }
);

Тем не менее, я получаю только первый элемент <div class='teamskill'></div>, который обновляется, никаких других (для других команд). Мысли?

Answer 1

Примерно так будет вставлять div, содержащий Total: # после каждой группы:

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

Вы можете отрегулировать разметку и т. Д., Просто отрегулируйте ее в зависимости от того, что вы хотите сделать с итогом.