Programmatically apply the image alt attribue as a class to parent element
<p>I want to add as a class the image alt attribute to its container element. Markup:</p>

<pre><code>&lt;div class="field-group-our-people"&gt;
  &lt;div class="field-items even&gt;
   &lt;img alt="John"&gt;
  &lt;/div&gt;
  &lt;div class="field-items odd&gt;
   &lt;img alt="Kevin"&gt;
  &lt;/div&gt;
  &lt;div class="field-items even&gt;
   &lt;img alt="Kate"&gt;
  &lt;/div&gt;
  &lt;div class="field-items odd&gt;
   &lt;img alt="Martin"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>To be like this:</p>

<pre><code>&lt;div class="field-group-our-people"&gt;
      &lt;div class="field-items even john&gt;
       &lt;img alt="John"&gt;
      &lt;/div&gt;
      &lt;div class="field-items odd kevin&gt;
       &lt;img alt="Kevin"&gt;
      &lt;/div&gt;
      &lt;div class="field-items even kate&gt;
       &lt;img alt="Kate"&gt;
      &lt;/div&gt;
      &lt;div class="field-items odd martin&gt;
       &lt;img alt="Martin"&gt;
      &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My Jquery code(but not working):</p>

<pre><code>//Add the image alt attribute as class for individual styling
$('.group_our_people .field-item').each(function() {
  var att = $('.group_our_people .field-item img').attr('alt');               
  $(this).addClass(att);        
});
</code></pre>

<p>What is wrong/missing in my code?</p>
