父母的總寬度根據子女人數

Question

我想根據其子女在UL中添加動態寬度。任何想法如何使用jQuery或Javascript做到這一點？

<ul style="width:?"> 
<li style="width:50px;float:left;">&nbps;</li> 
<li style="width:50px;float:left;">&nbps;</li> 
<li style="width:50px;float:left;">&nbps;</li> 
</ul> 

Answer 1

$(function(){ 
    $ul = $('#ul'); 
    $ul.css('width',($ul.children().length*50)+"px"); 
    alert($ul.css('width')); 
}); 

http://jsfiddle.net/QctE3/

，並適應不斷變化的寬度：

http://jsfiddle.net/QctE3/1/

$(function(){ 
    $ul = $('#ul'); 
    cwidth = parseInt($ul.children('li:first-child').css('width')); 
    $ul.css('width',($ul.children().length*cwidth+"px")); 
    alert($ul.css('width')); 
}); 

Answer 2

試試這個：

<script type="text/javascript" charset="utf-8"> 
    var intTotalWidth = 0; 
    $("ul li").each(function(index, value) { 
     intTotalWidth = intTotalWidth + parseInt($(this).innerWidth());  
    }); 

    $("ul").css("width", intTotalWidth); 
</script> 

Answer 3

list.style.width = list.childElementCount * 50 + 'px'; 

其中list是對UL元件的參考。

順便說一句，如果你不想硬編碼的寬度值（50），你可以先讀取LI元素的寬度，像這樣：

list.style.width = 
     list.childElementCount * list.firstElementChild.offsetWidth + 'px'; 

此代碼適用於所有主流瀏覽器，但不在IE8及以下。

現場演示：http://jsfiddle.net/simevidas/e77V4/1/

---

如果LI元素具有可變寬度：

$('#list').width(function() { 
    var width = 0; 
    $(this).children().each(function() { 
     width += $(this).outerWidth(); 
    }); 
    return width; 
}); 

現場演示：http://jsfiddle.net/simevidas/e77V4/2/