父母的总宽度根据子女人数

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/