javascript - 画像の代替属性をクラスとして親要素にプログラムで適用する

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

現在のdivの子であるを取得する必要がありますimg（反復時）：

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

あなたがやっている方法（つまり、セレクターを繰り返す）では、複数の値を取得することになり、最初の値のみが考慮されます。したがって、すべての div はそのクラス「John」を取得します。

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