個々のliの幅をul内のさまざまな幅で計算するには

Question

以下のリストがあります。各画像の幅は変化し、タグの余白は15pxになります。リスト項目を少し伸ばして、次の画像からいくらかスペースを取ってください。

<div id="otherproducts"> 
    <ul> 
    <li><a href="products/sign-materials/"><img border="0" src="assets/images/subbrands/slider/slider.png" alt="" /></a></li> 
    <li><a href="products/sign-materials/"><img border="0" src="assets/images/subbrands/slider/alight-slider.png" alt="" /></a></li> 
    <li><a href="products/sign-materials/"><img border="0" src="assets/images/subbrands/slider/eclider.png" alt="" /></a></li> 
    <li><a href="products/sign-materials/"><img border="0" src="assets/images/subbrands/slider/aluer.png" alt="" /></a></li> 
    <li><a href="products/sign-materials/"><img border="0" src="assets/images/subbrands/slider/alucr.png" alt="" /></a></li> 
    </ul> 
</div> 

は、どのように私は現在、合計が出てそれが必要よりもはるかに大きい来ているので、私はULに正しい合計幅を与えることができます下の私の計算では私の項目の正確な幅を与えるためにjqueryのを取得することができます...

var obj = $(this);    
var s = $("li", obj).length; 
var w = $("li", obj).width(); 
var h = $("li", obj).height(); 
obj.width(w); 
obj.height(h); 
$("ul", obj).css('width',s*w); 

Answer 1

var ul= jQuery('ul'), 
    finalWidth=0,finalHeight=0; 

ul.find('li').each(function(){ 
    finalWidth+=jQuery(this).width(); 
    finalHeight+=jQuery(this).height(); 
}); 


ul.height(finalHeight).width(finalWidth); 

Answer 2

あなたのソリューションだけで、最初の項目を測定し、各項目は、その長さで想定しています。むしろjQueryのそれぞれを使用して、それらを個別に測定し、すべての項目を反復処理：

は

ステファン・ミュラーのアプローチと同様に

var width = 0; 
$("li", obj).each(function(){width += $(this).width()}); 

$("ul", obj).width(width); 

Answer 3

を試してみてください、あなたはおそらく.each()を使用したいが、あなたは迎えに.outerWidth(true)機能を使用する必要がありますマージンも同様です。

EDIT：私のコードはあなたのものに置き換えられるように更新されました。

var obj = $(this); 
// calculate the max height of the <li>s 
var max_h = 0; 
$("li", obj).each(function() { 
    max_h = Math.max(max, $(this).outerHeight(true)); // include padding and margins 
}); 
obj.height(max_h); // set the (presumedly <div>'s) height to the max_height 
var w = 0; 
$("li", obj).each(function() { 
    w += $(this).outerWidth(true); 
}); 
$("ul", obj).width(w); // set the width of the <ul> to be the sum of the <li>'s widths