使用jquery的div内元素的总和 [英] Sum value of elements inside of a div using jquery

问题描述

我正在对一组用户进行排序，我有4种分组方式(如所示2):

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.

我的排序jQuery脚本在这里:

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.

我还不是jQuery的最大用户，但是尝试使用此类可排序元素进行更多练习.

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

编辑
我修改了html，使其在每个<div id="team#"></div>元素(包含成员)下都包含一个<div class='teamskill'></div>.

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

我想更新teamskill(至少它的内容).

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

所以我修改了jQuery代码，使其看起来像这样:

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

                }
            }
        );
    }
);

但是，最后我只更新了第一个元素<div class='teamskill'></div>，没有其他(对于其他团队).有想法吗?

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

推荐答案

类似的操作将在每个组之后插入一个包含Total: #的div:

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.

这篇关于使用jquery的div内元素的总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！