jqueryドロップイベントでdivクラスの値を取得

Question

jQueryを使用して、divクラスの値を取得して表示する際に、「ドロップ」しています。 たとえば、この特定の要素がドロップされたときに'01：20 'を表示したいとします。 div class = 'routineTime'> 01:20/div>

さらに、これらのドロップされた要素の合計を合計して表示する必要があります。

jsfiddleに例がありますが、最初の要素 の 'routineTime'しか表示されません。私は合計される必要があります 'routineTime'をドロップされる各要素の表示。

http://jsfiddle.net/n2learning/QfFQ9/9/

任意の助けに感謝！あなたのドロップイベントハンドラで

DK

Answer 1

ドロップできるセクション内のすべてのドロップされた要素のイテレータを実装する必要があります。

drop: function(event, ui) { 
     $('#info').find("h1").remove(); 

     var tmp, routineTime = [0, 0]; 
     $('.routineTime', $(this)).each (function() { 
      tmp = $(this).text().split(':'); 

      if ($.trim(tmp[0]) == '') tmp[0] = 0; 

      routineTime [0] += parseInt(tmp[0], 10); 
      routineTime [1] += parseInt(tmp[1], 10);    
     }); 

     routineTime [0] += parseInt(routineTime [1]/60); 
     routineTime [1] = routineTime[1]%60; 

     $('#calcTime').html(routineTime [0] + ':' + routineTime [1]); 

    } 

DEMO

でaddTimeロジックは独自の複雑さを持っている...あなたは

$.each内部の編集を実装する必要がある：追加でaddTimeロジック..私はどのようにそれを知ってみましょうを行く。

Answer 2

、あなただけではなく漠然としたセレクタを使用するよりも、ターゲットフレーム内のすべての要素のコレクションを反復処理する必要があります。

var routineTime; 

$('#dropTargetframe .routineTime').each(function() { 

    //Example used here, use your own time library. 
    routineTime += Foo.GetTimeValue($(this).html()); 

}); 

$('#calcTime').text(routineTime);