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> exist un子列表

如何使用JQuery做到这一点？

Answer 1

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

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

示例小提琴http://jsfiddle.net/hzHUn/3/

（4个元素和1个嵌套列表的Firebug视图）

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

Answer 2

尝试

var $lis = $('ul > li');
$lis.eq(0).css('width', '10%');
$lis.slice(1).css('width', (90 / ($lis.length - 1)) + '%');

Answer 3

您可以这样尝试：

JS

$("#myul li:eq(0)").width("10%").css("background", "yellow");
$("#myul li:gt(0)").width("90%").css("background", "red");

请注意，背景色只是为了更好地可视化结果

FIDDLE http://jsfiddle.net/U9tcV/

Answer 4

我的建议是在CSS中设置第一个li width ，然后使用jQuery设置其余的width ，如下所示：

CSS：

li:first-child{
    width: 10%;
}

jQuery的：

$(document).ready(function () {
    var itemWidth = Math.floor(90/($('ul > li').length - 1)); //using Math.floor to make sure it doesn't go beyond 100%
    $('ul > li:not(:first)').css('width', itemWidth + '%');
});

演示小提琴

编辑： IE <= 6不支持first:child CSS，因此下面的脚本行可以在jQuery中用于设置第一个li元素的样式。

$('ul > li:first').css('width', '10%');