使用jQuery动态分配百分比宽度

Question

我运行了一个简单的jQuery来为我的列表项分配宽度：

    $(subMenu).each( function() {
        var noLi        = $(this).children('li').length,
            itemSize    = (10/noLi)*10;
        $(this).children('li').each( function() {
            $(this).css('width', itemSize +'%');
        });
    });

我知道在这种情况下，列表项总是少于10个，所以我通过简单的itemSize计算来生成百分比宽度。然而，如果增加更多的项目，整个事情就会失败；布局将不符合预期。

我也相信这可能不是实现这一目标的最有效方法，但我不确定有更好的方法。有人能给我指正确的方向吗？

Answer 1

你的意思是itemSize变大了？如果是这样，你可以这样做：

itemSize = Math.min(100, (10/noLi)*10); // Get smallest value of the two. 100 is the max now

关于添加尺寸，您可以将代码替换为：

 $(this).children('li').css('width', itemSize +'%'); // no need for each

合并后为：

$(subMenu).each( function() {
    var $AllLi  = $(this).children('li'); // Save'm all for later access
    var noLi    = $AllLi.length; // we saved all selected li´s so we dont need to reselect
    itemSize    = Math.min(100, (10/noLi)*10);
    $AllLi.css('width', itemSize +'%'); // no need for each
});

<小时>

另一种方法可能更好，使用css：

<style>
    ul{
        width: 100%; 
        display: table-row;
    }
    li{
        display: table-cell;
    }
    li:gt(10){
        display: none;
    }
</style>
<ul>
    <li>li part</li>
    <li>li part</li>
    <li>li part</li>
    <li>li part</li>
</ul>

Answer 2

首先，您不需要对将要拥有的项目数量做出任何假设。如果你只想把100%的宽度分成x个项目，你可以简单地使用100 / x。

此外，您不需要嵌套的.each。jQuery会自动执行此操作。

$(subMenu).each(function() {
    var items = $(this).children('li');
    var itemSize = 100 / items.length;
    items.css('width', itemSize +'%');
});