基于集合中lis数的li的动态宽度

Question

我想根据列表中的li（s）数量将动态宽度设置为li（s）。例如，如果有18个li（s）。每个宽度应为100％/ 18 = 5.55％。如果我有3组不同的ul，我该怎么办？我试着用这个。

$('.lesson-nav ul li').width( 100 / $(".lesson-nav ul li").length + '%' );

由于未知原因：此脚本的宽度为120％，而只有1 li，当有18 lis时为27.55％。

Answer 1

根据documentation：

  

.css（width）和.width（）之间的区别在于后者   在前者返回无单位像素值（例如，400）   返回单位完整的值（例如，400px）。

所以你应该使用css(width)

$('.lesson-nav ul li').css("width", 100 / $(".lesson-nav ul li").length + '%' );

Answer 2

虽然我无法重现您的120％问题。要回答你关于＆＃34的问题，如果我有3个不同的ul＆＃34;我应该怎么做，假设你有3个不同的.lesson-nav s，其中有列表......就像这样：

JSFiddle

$('.lesson-nav').each( function() {
    $lis = $(this).find('ul li');
    $lis.width( 100 / $lis.length + '%' );
});

如果您在一个ul中有多套.lesson-nav，那么您可以稍微修改您的选择器JSFiddle

如果width()因任何原因无效，您也可以将css("width",...)替换为width()。