イメージalt属性をクラスとして親要素にクラスとして適用する

Question

イメージalt属性をそのコンテナ要素にクラスとして追加したいと考えています。マークアップ：

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

私のjQueryのコード（が動作していない）：

//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);   
}); 

私のコードで行方不明/何が問題である

<div class="field-group-our-people"> 
    <div class="field-items even> 
    <img alt="John"> 
    </div> 
    <div class="field-items odd> 
    <img alt="Kevin"> 
    </div> 
    <div class="field-items even> 
    <img alt="Kate"> 
    </div> 
    <div class="field-items odd> 
    <img alt="Martin"> 
    </div> 
</div> 

はこのようなことか？

Answer 1

あなたは（繰り返しで）現在のdiv要素の子であるimgを取得する必要があります：

var att = $(this).find('img').attr('alt'); 

あなたは（すなわちセレクタを繰り返す）やっている方法を、あなたは複数の値を取得してしまう、とだけ最初のものが考慮されます。だから、すべての部門はそのクラスを取得します： "ジョン"。

Answer 2

$('div.field-group_our_people div[class^=".field-items"] img').each(function() 
{ 
    var att = $(this).attr('alt');    
    $(this).parent().addClass(att);   
}); 

Answer 3

$('.field-group-our-people .field-items img').each(function() { 
    $(this).parent().addClass($(this).attr('alt')); 
});