Sum giá trị của các yếu tố bên trong một div sử dụng jquery

Question

tôi đang làm một phân loại của một tập của người sử dụng, tôi có 4 nhóm như vậy (2 hiển thị):

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

Bây giờ những gì tôi muốn làm là tổng hợp các giá trị kỹ năng cho mỗi nhóm, khi đang di chuyển khi chúng được sắp xếp.

sắp xếp jQuery kịch bản của tôi là ở đây:

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

       } 
      } 
     ); 
    } 
); 

Tôi muốn để có thể 'trên thả' của nguyên tố này, tổng hợp tất cả những tổng số trong mỗi 'đội'. Vì vậy, bất cứ ai sắp xếp các nhóm luôn nhận được tổng số kỹ năng chính xác cho mỗi nhóm.

Tôi không phải là người dùng lớn nhất của jQuery, nhưng cố gắng thực hành nhiều hơn với các yếu tố có thể sắp xếp như thế này.

EDIT
tôi sửa đổi html tôi để bao gồm một <div class='teamskill'></div> dưới mỗi phần tử <div id="team#"></div> (trong đó có các thành viên).

Tôi muốn có teamskill được cập nhật (ít nhất là nội dung của nó).

Vì vậy, tôi sửa đổi mã jQuery để trông giống như vậy:

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

       } 
      } 
     ); 
    } 
); 

Tuy nhiên, tôi kết thúc với chỉ là người đầu tiên yếu tố <div class='teamskill'></div> cập nhật, không có những người khác (cho các đội khác). Suy nghĩ?

Answer 1

Something như thế này sẽ chèn một div chứa Total: # sau mỗi nhóm:

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

Bạn có thể điều chỉnh đánh dấu, vv ... chỉ cần điều chỉnh nó dựa trên bất cứ điều gì bạn muốn làm với tổng số.