title: Run a jQuery function for each element with a certain class
body: <p>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 <code>.item</code></p>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;div class="item"&gt;
      &lt;label for="start"&gt;Start&lt;/label&gt;
      &lt;input class="start" id="start" value="10:00" /&gt;
  
      &lt;label for="end"&gt;End&lt;/label&gt;
      &lt;input class="end" id="end" value="12:15" /&gt;
  
      &lt;label for="hours"&gt;Hours&lt;/label&gt;
      &lt;input class="hours" id="hours" value="" readonly /&gt;
  &lt;/div&gt;
  
  &lt;div class="item"&gt;
      &lt;label for="start"&gt;Start&lt;/label&gt;
      &lt;input class="start" id="start" value="10:00" /&gt;
  
      &lt;label for="end"&gt;End&lt;/label&gt;
      &lt;input class="end" id="end" value="13:30" /&gt;
  
      &lt;label for="hours"&gt;Hours&lt;/label&gt;
      &lt;input class="hours" id="hours" value="" readonly /&gt;
  &lt;/div&gt;
  
  &lt;button id="calculate" onclick="calculate()"&gt;Calculate&lt;/button&gt;
  </code></pre>
  
  <p><strong>The script:</strong></p>
  
  <pre><code>$(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 &lt; 0) hours = 24 + hours;
           if(mins2 &gt;= mins1) {
               mins = mins2 - mins1;
           } else {
               mins = (mins2 + 60) - mins1;
           }
  
           // the result
           $(".hours").val(hours + ':' + mins);         
       }
  
           $(".start,.end").change(calculate);
           calculate();
  
  });
  </code></pre>
  
  <p>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?</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/44NCk/8/" rel="nofollow">http://jsfiddle.net/44NCk/8/</a></p>
  
  <p>Thanks!</p>