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计算生成百分比宽度。然而，如果添加更多的项目，整个事情将失败＆amp;布局不符合预期。

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

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 +'%');
});

使用jQuery动态分配宽度分配

2 个答案: