使用jquery对div内部元素求和

Question

我正在对一组用户进行排序,我有4个像这样的分组(显示2个):

<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的最佳用户,但是尝试用这样的可排序元素练习更多.

编辑
我修改了我的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

像这样的东西会插入一个包含Total: #在每个组之后的div :

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

您可以调整标记等...只需根据您想要对总数做什么来调整它.