jquery - JQuery为不同的宽度分配元素

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 颜色只是为了更好地可视化结果

小提琴 http://jsfiddle.net/U9tcV/

Answer 4

我的建议是width先li在 CSS 中设置，其余使用 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 + '%');
});

演示小提琴

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

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