画像の幅を指定し、親要素の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});
});
});