代码之家 › 专栏 › 技术社区 › Jakub

使用jquery的div中元素的和值

sorting html jquery

Jakub · 技术社区 · 14 年前

我正在对一组用户进行排序,共有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> 更新,没有其他人(其他团队)。思想?

1 回复 | 直到 14 年前

Nick Craver 14 年前

类似的东西会插入一个div,其中包含 Total: # 每组之后:

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

你可以调整标记等等…只要根据你想对总数做的调整就可以了。