Программно применить изображение alt attribue как класс к родительскому элементу

Question

Я хочу добавить в качестве класса атрибут alt alt в свой элемент контейнера. Разметка:

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

быть похожим на это:

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

Что неправильно/отсутствует в моем коде?

Answer 1

Вы должны получить img, что является потомком текущего DIV (на итерацию):

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

Путь вы делаете (то есть повторять селектор), вы в конечном итоге получение нескольких значений, и только учитывается первая. Итак, каждый div получит свой класс: «Джон».

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