画像をそのaltの文字列に置き換えたい

Question

画像の代わりに<span>タグでそのaltの文字列に置き換えたいです。

具体的には、

<div class="hoge">
<img src="hoge_a.gif" alt="ユニークな文字列1">
<img src="hoge_b.gif" alt="ユニークな文字列2">
<img src="hoge_c.gif" alt="ユニークな文字列3">
<img src="hoge_d.gif" alt="ユニークな文字列4">
<img src="hoge_e.gif" alt="ユニークな文字列5">
<img src="hoge_f.gif" alt="ユニークな文字列6">
</div>

この構成から以下に変更したいです。

<div class="hoge">
<span>ユニークな文字列1</span>
<span>ユニークな文字列2</span>
<span>ユニークな文字列3</span>
<span>ユニークな文字列4</span>
<span>ユニークな文字列5</span>
<span>ユニークな文字列6</span>
</div>

ページ全体ではなく、hoge内のimgのみ対象です。
hogeは複数存在するため、各hogeごとで処理を完結したいです。
imageの数は可変で、画像名・文字列はそれぞれ規則性はありません。

こちらをjqueryで処理する方法をご教授願えればと思います。

Comments

[sounisi5011]

ページ内にある全てのimg要素が対象ですか？それとも、hogeクラスが付いた要素内のimg要素のみが対象ですか？

[castail]

早速のご回答ありがとうございます。

説明が不足し申し訳ございません。「hoge」内のimgのみが対象です。

Answer 1

/**
 * hogeクラスが付いた要素内にある、alt属性の存在するimg要素を取得し、
 * .each()メソッドで各要素に対して処理をおこなう。
 * 参考：http://api.jquery.com/each/
 */
$('.hoge img[alt]')
  .each(function() {
    /* 置き換え元のimg要素 */
    var elem = $(this);
    /* alt属性の値 */
    var altAttr = elem.attr('alt');
    /* 置き換えるspan要素。内容のテキストにalt属性値を指定 */
    var replaceElem = $('<span>', {
      // alt属性値をテキストとして指定
      // Note: このように指定しないと、alt属性値にHTMLとして有効な文字列が混入した場合にHTMLとして処理されてしまう
      text: altAttr
    });

    /**
     * alt属性値が空文字列（内容がない文字列）の場合、置き換えない
     */
    if (altAttr !== '') {
      /**
       * img要素をspan要素に置き換え
       * 参考：http://bl6.jp/web/javascript/replacewith-replaceall/
       */
      elem.replaceWith(replaceElem);
    }
  });

サンプル（JS Bin）：http://output.jsbin.com/hurene
コード（JS Bin 編集画面）：http://jsbin.com/hurene/edit?html,js

hogeクラスの付いた要素内にある、alt属性の指定されたimg要素全てに対する置き換え処理を行うコードになります。
alt属性値にHTMLタグが紛れ込んでいても、普通のテキストとして置き換えられるようになっています。

なお、alt属性が省略された場合や、内容が空文字列の場合は置き換えないようになっています。

Comments

[castail]

ご回答ありがとうございます。

こちらの内容で実現できました！
感謝いたします。

ありがとうございました。

Answer 2

  $.each($('#hoge').find('img'), function(i, e) {
    $('#hoge').append('<span>' + $(e).attr('alt') + '</span>');
    $(e).remove();
  })

こんな感じでどうでしょう。

Comments

[castail]

早速のご回答誠にありがとうございました。

spanへの置き換えは問題なくできました！ありがとうございます。
ただこの#hogeがページ内に複数あるため全hoge内に全てのhogeの<span>が全て入っている状態です。
この点お伝え漏れで誠に申し訳ございません。
この場合はどうなりますでしょうか？
後出しの条件で恐縮ですが、ご教授いただければ幸いです。

[sounisi5011]

そのコードですと、alt属性値にHTMLタグとして有効な文字が紛れ込んでいた場合に、HTMLとして認識されてしまうものと思われます…

[castail]

度々すいません。こちら解決しました！お騒がせし申し訳ありません。ありがとうございました！

[tkanda]

複数存在している #hoge のうちの特定の一つだけを対象としてこの処理を実行したい、ということでしょうか。

例えば $('#hoge').get(0).find(...) のように修正すればページ内の最初の #hoge だけを対象にすることができます。どの #hoge を対象にするかは、ルールがあると思いますので、それに沿ってセレクタ部分を工夫すればいいのではないでしょうか。

sounisi5011 さんが指摘されていることも、考慮されればベターだと思います。

[castail]

#hoge全てにそれぞれ処理を加えたいです。

しかしsounisi5011さんの記述の応用でこちらうまくいきました。
そのためベストアンサーはそちらにさせて頂きます。

せっかくご教授頂いたにも関わらず恐縮ですがご了承くださいませ。