動的な幅を持つ複数の要素の合計幅を取得（計算）

Question

こんにちは私はできるだけ教育学者になるつもりです！

私は李のリストをulの中に入れました。各リチウム要素内

<ul class="ulclass"> 
    <li class="liclass"> 
     <div class="button">expand</div> 
     <img src="600px_wide.jpg"/> 
    </li> 
    <li class="liclass"> 
     <div class="button">expand</div> 
     <img src="800px_wide.jpg"/> 
    </li> 
    <li class="liclass"> 
     <div class="button">expand</div> 
     <img src="300px_wide.jpg"/> 
    </li> 
</ul> 

リチウムは、ネストされた画像の幅に拡大するクリックボタンがあります。したがって、画像の幅が800ピクセルの場合、はに応じて拡大されます。

ここで、すべてのliの合計幅を動的に計算したいという状況があります。すべての李のページロードでの幅を取得します

$(li).each(function() { 
totalWidth += parseInt($(this).width()); 
}); 

： は今、私のようなものを使用しています。しかし、1つのliを拡張した後、幅の値は変化しません。 私は李の拡大/縮小時に合計の幅を変更したいイベントリスナーかもしれませんか？私はそれがコールバックなどについては本当に新しいです。だから私は少なくともガイダンスをしたい。多分それは可能ではありません...

私はすべての助けを感謝！ありがとう

Answer 1

liを展開または縮小するたびに幅を計算するこのコードを単に呼び出すことができます。 li要素の膨大な数がある場合を除き、すべてのバックアップを追加するだけのパフォーマンスは悪くないはずです。

Answer 2

Jamesさんの回答は良いですが、値の読み取り頻度や回数によっては、値を求めるときはいつでもそのコードを呼び出すことをお勧めします。それはYUIと同等のようなものは、それはウィルのその後場合、

function totalWidth = new function() { 
    var total = 0; 
    $(li).each(function() { 
     total += parseInt($(this).width()); 
    }); 
    return total; 
} 

ジェームズが言ったように、あなたは$（LI）を呼び出すのパフォーマンスについて心配している場合：だからではなくsomeDependentFunction(totalWidth)の、あなたはtotalWidthがあるsomeDependentFunction(totalWidth())を、持っています最初の呼び出しの後に結果をキャッシュするので、実際にはそれほど多くないはずです。私は実際にはjQueryプロではないので、そうではないかもしれません。