質問: 画像の代わりにタグでそのaltの文字列に置き換えたいです。 具体的には、 ``` ``` この構成から以下に変更したいです。 ``` ユニークな文字列1 ユニークな文字列2 ユニークな文字列3 ユニークな文字列4 ユニークな文字列5 ユニークな文字列6 ``` ページ全体ではなく、hoge内のimgのみ対象です。 hogeは複数存在するため、各hogeごとで処理を完結したいです。 imageの数は可変で、画像名・文字列はそれぞれ規則性はありません。 こちらをjqueryで処理する方法をご教授願えればと思います。
回答: ``` /** * 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 = $('', { // alt属性値をテキストとして指定 // Note: このように指定しないと、alt属性値にHTMLとして有効な文字列が混入した場合にHTMLとして処理されてしまう text: altAttr }); /** * alt属性値が空文字列(内容がない文字列)の場合、置き換えない */ if (altAttr !== '') { /** * img要素をspan要素に置き換え * 参考:http://bl6.jp/web/javascript/replacewith-replaceall/ */ elem.replaceWith(replaceElem); } }); ``` サンプル(JS Bin): コード(JS Bin 編集画面): `hoge`クラスの付いた要素内にある、`alt`属性の指定された`img`要素全てに対する置き換え処理を行うコードになります。 `alt`属性値にHTMLタグが紛れ込んでいても、普通のテキストとして置き換えられるようになっています。 なお、`alt`属性が省略された場合や、内容が空文字列の場合は置き換えないようになっています。