Run a jQuery function for each element with a certain class

Question

I have a jQuery function which calculates the hours and minutes between two given times (hh:mm format). It's working perfectly fine but I'm trying to apply this function for each item in my HTML structure. Each item is wrapped into a div with class .item

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

The script:

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

});

My question is: How can I apply the jQuery .each() function in order to calculate the hours for each item in part? Or there is a better approach for this?

JSFiddle: http://jsfiddle.net/44NCk/8/

Thanks!

Answer 1

Loop through all items in the calculate function.

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

You can do this with an .each and passing in the $(this) element into your method.

$('.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. 
     }