liの数によってulの横幅を動的に設定したい

質問

以下のようなhtmlがあったとして、ul.imageの幅をliの数によって動的に設定したいのですが、
jQueryで指定する場合どう書けばいいのかご教授下さい。
liはfloatしているものとします。

======================================================

<div class="block">
<ul class="image">
<li><img src="hoge.jpg" alt="" /></li>
<li><img src="hoge.jpg" alt="" /></li>
<li><img src="hoge.jpg" alt="" /></li>
</ul>
</div>
<div class="block">
<ul class="image">
<li><img src="hoge.jpg" alt="" /></li>
<li><img src="hoge.jpg" alt="" /></li>
<li><img src="hoge.jpg" alt="" /></li>
<li><img src="hoge.jpg" alt="" /></li>
<li><img src="hoge.jpg" alt="" /></li>
<li><img src="hoge.jpg" alt="" /></li>
</ul>
</div>
<div class="block">
<ul class="image">
<li><img src="hoge.jpg" alt="" /></li>
</ul>
</div>

...以下、いくつも.blockが続きます

回答No.1

LancerVII · ベストアンサー

こんにちは。

liの数×指定px数であれば以下のようになると思います。

$().ready ( function() {
// div.blockの数だけ処理を行う
$('div.block').each ( function(index) {
// div.blockの中のur.imageのなかにあるli数を取得
var imgCount = $(this).find('ul.image li').length;
// widthはliの数×100とする
var width = imgCount * 100;
// div.blockのwidthを計算した値で変更する
$(this).width ( width );
});
});

お礼

丁寧にコメントまで添えて頂きありがとうございました！
eachの使い方がイマイチ分からなくて質問しましたが勉強になりました。

尚、ulの幅を指定したかったため
$('.image').each～としました。