JQuery为<li>元素</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)) + '%'; 
})

示例小提琴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");

请注意，bg颜色只是为了更好地显示结果

FIDDLE http://jsfiddle.net/U9tcV/

Answer 4

我的建议是在CSS中为width设置li，其余使用jQuery，如下所示：

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

Demo Fiddle

编辑： IE＆lt; = 6不支持first:child CSS，因此可以在jQuery中使用以下脚本行来设置第一个li元素的样式。< / p>

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