dynamic width of li based on number of lis in a set

Question

I want to set dynamic width to li(s) based on how many li(s) are there in list. For example if there are 18 li(s). Each width should be 100% / 18 = 5.55%. Also what should I do if I would have 3 different sets of ul. I tried to use this.

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

For unknown reason: This script gives width 120% while there is only 1 li and 27.55% when there are 18 lis.

Answer 1

As per documentation:

The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px).

So you should use css(width)

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