根据孩子数父母的总宽度

Question

I want to add dynamic width in UL according to the its child. Any idea how to do this using jQuery or 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/

And to adapt to changing widths:

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

Try this:

<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';

where list is a reference to the UL element.

Btw, if you don't want to hard-code the width value ( 50 ), you can read the width of the first LI element like so:

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

This code works in all current browsers, but not in IE8 and below.

Live demo: http://jsfiddle.net/simevidas/e77V4/1/

---

If the LI elements have variable widths:

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

Live demo: http://jsfiddle.net/simevidas/e77V4/2/