我正在对一组用户进行排序,我有 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 的最大用户,但尝试更多地练习像这样的可排序元素。
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>
更新,没有其他(对于其他团队)。想法?