画像の幅を指定し、親要素のwidthに代入し、さらに画像にあてた説明文を画像のaltとして入れたい。
<ul class="imgGallary"> <li><img src="image/01.jpg" width="200" height="260"> <span class="caption">海辺の風景</span></li> <li><img src="image/02.jpg" width="230" height="260"> <span class="caption">山の風景</span></li> <li><img src="image/03.jpg" width="266" height="260"> <span class="caption">川の風景</span></li> </ul>
このようなマークアップによるulのリストで画像ギャラリーを作成した場合などで、
画像の横幅を取得したい場合があります。
この例では、JSを使いimgタグの横幅を取得しその親要素のliタグ内にcssでwidthを挿入、
更に画像に続いて記述されている画像についての説明文を、画像のaltに代入しています。
$(function(){ //画像ギャラリーのliタグを全て取得 $('ul.imgGallary li').each(function(i){ //liの子要素imgにある画像の幅(width)を取得 var w= $('ul.imgGallary li img').eq(i).width(); //liの子要素spanにあるテキストを取得 var a= $('ul.imgGallary li span.caption').eq(i).text(); //li要素にwidthを指定 $('ul.imgGallary li').eq(i).css('width',w); //img要素に画像のキャプションをalt属性を挿入 $('ul.imgGallary li img').eq(i).attr({alt:a}); }); });