JQuery 为 <li> 元素分配不同的宽度

Question

我有一个 html 列表:

<ul>
  <li> first element </li>
  <li> second element </li>
  <li> third element </li>
  <li> 4th element </li> 
  ....
</ul>

使用 jquery，我想首先分配 <li>宽度等于 10%，对于其他宽度 <li> (倒数第二个)其余宽度除以数字个数<li> (例如 90%/5)

我必须排除 <li>存在于子列表中

如何使用 JQuery 做到这一点？

Answer 1

您可以在 css() 中使用一个函数，并使用该方法一次分配正确的宽度

var li = $('#outermostlist > li');
li.css('width', function(i) {
    return (i === 0)? '10%' : (90 / (li.length - 1)) + '%'; 
})

fiddle 示例 http://jsfiddle.net/hzHUn/3/

(4 个元素和 1 个嵌套列表的 Firebug View )

当然要注意90/(li.length - 1)得到的结果:在某些情况下所有值的和可能大于100% ，这可能不是您想要的:因此，如果是这种情况，请确保以某种方式将结果四舍五入为前一个较低的整数(例如 ~~(90/(li.length - 1) ));