title: jQuery .each() for repeating elements
body: <p>I'm trying to use jQuery to detect the orientation of a number of images. Once detected, I want to add a class to indicate this i.e <code>.landscape</code>.</p>
  
  <p>The code below seems to only be assessing the first image it comes across, and then applying that to all subsequent images. For example, if the first image is landscape, this will be applied to all images including portrait or square image.</p>
  
  <p>Am I misusing the <code>.each()</code> statement?</p>
  
  <p>Thank you.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="carousel-cell"&gt;
      &lt;img src="domain.com" data-width="100" data-height="200" /&gt;
  &lt;/div&gt;
  &lt;div class="carousel-cell"&gt;
      &lt;img src="domain.com" data-width="200" data-height="100" /&gt;
  &lt;/div&gt;
  &lt;div class="carousel-cell"&gt;
      &lt;img src="domain.com" data-width="100" data-height="100" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>// Detect image orientation 
  $('.carousel-cell').each(function () {
  "use strict";
  
  var img = $('img');
  
  if (img.attr('data-width') &gt; img.attr('data-height')){
      // Landscape
      img.removeClass().addClass('landscape');
  } else if (img.attr('data-width') &lt; img.attr('data-height')){
      // Portrait
      img.removeClass().addClass('portrait');
  } else {
      // Equal (Square)
      img.removeClass().addClass('square');
  }
  });
  </code></pre>