jquery - jQuery设置列表项的宽度

我正在使用Bootstrap，导航菜单元素是由用户生成的。有些用户可能只需要2个菜单列表项，有些用户可能只需要8个菜单列表项。

我希望能够根据菜单中存在的项目数来设置菜单导航元素的宽度。因此，例如，如果有4个菜单项，则li宽度将被设置为25％，如果有2个，则li宽度将被设置为50％

jQuery有没有办法做到这一点？

<ul class="nav nav-pills mainNav">
    <li><a href="#">Home</a> </li>
    <li><a href="#">Link 1</a> </li>
    <li class="active"><a href="#">Link 2</a> </li>
    <li><a href="#">Link 3</a> </li>
    <li><a href="#">Link 4</a> </li>
    <li><a href="#">Link 5</a> </li>
    <li><a href="#">Link 6</a> </li>
</ul>

如何获取jQuery以根据项目数设置宽度？

最佳答案

因此，我使用以下代码根据存在的数量来设置LI的宽度：

$.fn.autowidth = function() {
return this.each(function() {
    $('li', this).css({'width' : (100 / $('li', this).length) + '%'})
});
};
$('.mainNav').autowidth();