ｊQueryの要素選択について

質問

例えば、
<ul id="list">
<li style="width: 100px;">リスト１</li>
<li style="width: 200px;">リスト２</li>
<li style="width: 300px;">リスト３</li>
</ul>

というHTMLの、liのwidthの合計をjQueryを使って求めるには、どうすれば良いでしょうか？

for( prop in $("ul#list li") ) {
width_sum += prop.width();
}
こんな感じだと思っていたのですが・・・うまくいきません。

Javascript初心者です。
「その前に○○を勉強した方がいいよ」などのアドバイスはお控えいただいて、純粋に解答のみを教えていただければ幸いです。

よろしくお願いいたします。

回答No.1

steel_gray · ベストアンサー

eachを使った方法で。
http://semooh.jp/jquery/api/core/each/callback/

var width_sum = 0;
$('#list li').each(function(){
width_sum += $(this).width();
});

liを浮動化させてあって#listの幅を得たいなら算出するより#listを浮動化させて直に#listの幅を求める方法もある。
$('#list').css('float','left');//浮動化
width_sum = $('#list').width();
$('#list').css('float','none');//戻す

浮動化させる事により#listの幅は内容の合計になる。liにマージンを付けたり#listにpaddingを付けたりするならコッチのほうが楽そう。

お礼

どうやら基本的な関数を見落としていたようです……
eachの方法で成功いたしました。

ご回答、ありがとうございました。

回答No.3

think49

#2です。

大きな勘違いをしていました。#2は流してください…。
大変失礼いたしました。m(_ _)m

回答No.2

think49

> というHTMLの、liのwidthの合計をjQueryを使って求めるには、どうすれば良いでしょうか？
ノード数を算出したいのなら、lengthプロパティが使えます。
どうしてもDOMを使いたくないというなら別ですが、個人的にはあえてjQueryにこだわる必要はない気がします。

alert($("ul#list>li").length);

element.length - MDC
https://developer.mozilla.org/ja/DOM/element.length