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/

根据孩子的数量，父母的总宽度

3 个答案: