以编程方式将图像alt属性作为类应用于父元素

Question

我想将作为图像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')); 
});