CMSで構築しているサイトの施工事例のページなどで使いました。
$(function(){ $('#construction li img').each(function(){ $(this).wrap('<a href="images/construction/detail-' + $(this).closest('li').attr('class') + '.jpg"></a>') $(this).after(' <p class="alt">' + $(this).attr('alt') + '</p> '); }); });
anchorのhrefを、images/construction内にある先頭にdetail-の名前が付いた画像に、画像を囲っているリストのクラス属性を足して指定し(親のリストのクラス名がlist1であればimages/construction内のdetail-list1.jpgにリンク)、#selector中のリスト内のimgのaltをpで囲いそのイメージの後に追加します。
すっきりさせたい時は変数を使いましょう。
eachはいくつかの候補(この場合li)に対して、毎回決まった処理でなくそれぞれに対応させた形に処理させたい時に使います(それぞれのクラス名のリンクを持ったanchorで囲ったりaltの内容を持ったpタグを追記したり)。
eachを抜くとエラーが出ます。
コメント