jQuery:インデックス番号の属性を取得するには

質問

以下のようなHTMLで組まれている画像一覧があります。
<ul>
<li><img src="sum_hoge.jpg"></li>
<li><img src="sum_hoge2.jpg"></li>
<li><img src="sum_hoge3.jpg"></li>
</ul>

jQueryを使って、各画像に拡大画像をリンクさせたいのですが
例）
<li><img src="sum_hoge.jpg"></li>
↓
<li><a href="hoge.jpg"><img src="sum_hoge.jpg"></a></li>

liはいくつ並ぶかわからず、hrefもimg srcから抽出してセットする必要があります。
(拡大画像は"sum_"が付かないだけで、同じファイル名です。)

liの数の分だけfor文を回し、１行ずつsrcを抽出、sum_をとって<img>の前後に<a href=""></a>を付加していく・・・ということをやりたいのですが、
var j=$('ul li').length;
for (var i = 0; i < j; i = i +1){
?
}
でつまずいています。
インデックスで特定は
$('li').eq(i)
属性の取得は
$('img[src]')
でできると思うのですが、
「特定のインデックス番号」の「特定の属性」を取得
ってどう書けばいいんでしょうか。

なんか回答を聞けば、あ、それでいいのか・・・と思うような気もしますが、どうぞよろしくお願いします。

回答No.1

LancerVII · ベストアンサー

こんにちは。

jQueryには繰り返し処理としてeachというものがあります。

<script type="text/javascript">
$().ready ( function() {
// liの要素数分のループ
$('ul li').each ( function() {
// liにあるimgタグのsrc属性を取得してsum_を消去
var src = $(this).find('img').attr('src').replace('sum_','');
// li自身のhtmlを書き換える
$(this).html ( '<a href="' + src + '">' + $(this).html() + '</a>' );
});
});
</script>

これで行けると思います。

余計なお世話かもしれませんが、sumがサムネイルを意味しているのであれば
thumbnailがサムネイルですのでthumがわかりやすいかも？

お礼

ありがとうございました！
each、初めて知りました。
やはり質問してよかったです。
助かりました。