爲每個具有某個類的元素運行jQuery函數

Question

我有一個jQuery函數，它可以計算兩個給定時間（hh：mm格式）之間的小時和分鐘。它工作得很好，但我正在嘗試爲我的HTML結構中的每個項目應用此函數。每個項目都裹成一個div類.item

我的HTML：

<div class="item"> 
    <label for="start">Start</label> 
    <input class="start" id="start" value="10:00" /> 

    <label for="end">End</label> 
    <input class="end" id="end" value="12:15" /> 

    <label for="hours">Hours</label> 
    <input class="hours" id="hours" value="" readonly /> 
</div> 

<div class="item"> 
    <label for="start">Start</label> 
    <input class="start" id="start" value="10:00" /> 

    <label for="end">End</label> 
    <input class="end" id="end" value="13:30" /> 

    <label for="hours">Hours</label> 
    <input class="hours" id="hours" value="" readonly /> 
</div> 

<button id="calculate" onclick="calculate()">Calculate</button> 

腳本：

$(function() { 
    function calculate() { 
      time1 = $(".start").val().split(':'), 
      time2 = $(".end").val().split(':'); 
      hours1 = parseInt(time1[0], 10), 
      hours2 = parseInt(time2[0], 10), 
      mins1 = parseInt(time1[1], 10), 
      mins2 = parseInt(time2[1], 10); 
      hours = hours2 - hours1, 
      mins = 0; 
     if(hours < 0) hours = 24 + hours; 
     if(mins2 >= mins1) { 
      mins = mins2 - mins1; 
     } else { 
      mins = (mins2 + 60) - mins1; 
     } 

     // the result 
     $(".hours").val(hours + ':' + mins);   
    } 

     $(".start,.end").change(calculate); 
     calculate(); 

}); 

我的問題是：如何申請jQuery的。每（）函數來計算每個項目的小時數部分？或者有更好的方法呢？

的jsfiddle：http://jsfiddle.net/44NCk/8/

謝謝！

Answer 1

循環遍歷calculate函數中的所有項目。

$(function() { 
    function calculate() { 
     $(".item").each(function(){ 
      var $start = $(this).find(".start"), 
       $end = $(this).find(".end"), 
       $result = $(this).find(".hours"), 
       time1 = $start.val().split(':'), 
       time2 = $end.val().split(':'), 
       hours1 = parseInt(time1[0], 10), 
       hours2 = parseInt(time2[0], 10), 
       mins1 = parseInt(time1[1], 10), 
       mins2 = parseInt(time2[1], 10); 
       hours = hours2 - hours1, 
       mins = 0; 

      if(hours < 0) hours = 24 + hours; 
      if(mins2 >= mins1) { 
       mins = mins2 - mins1; 
      } else { 
       mins = (mins2 + 60) - mins1; 
      } 

      // the result 
      $result.val(hours + ':' + mins); 
     }); 
    } 
    $(".start,.end").on("change", calculate); 
    $("#calculate").on("click", calculate); 
    calculate(); 

}); 

http://jsfiddle.net/8MfCr/

Answer 2

你可以用.each做這個，並將$（this）元素傳遞給你的方法。

$('.item').each(function() { //foreach element with a class of item. 
    calculate($(this));  //pass in the current element into your function. 
}); 

function calculate($currentElement) { 
      time1 = $currentElement.find(".start").val().split(':'), //find the element with a start class within the $current element. 
      time2 = $currentElement.find(".end").val().split(':'); //find end class 
      hours1 = parseInt(time1[0], 10), 
      hours2 = parseInt(time2[0], 10), 
      mins1 = parseInt(time1[1], 10), 
      mins2 = parseInt(time2[1], 10); 
      hours = hours2 - hours1, 
      mins = 0; 
     if(hours < 0) hours = 24 + hours; 
     if(mins2 >= mins1) { 
      mins = mins2 - mins1; 
     } else { 
      mins = (mins2 + 60) - mins1; 
     } 

     $currentElement.find(".hours").val(hours + ':' + mins); //find hours class and set value to calculated value. 
    }