jQuery calculate number of list items, then multiply that by number and set as width

Question

I'm trying to set a dynamic width to ul.sections by checking how many li's exist and multiply that by the width of the li ($("ul.sections").width()), which in this case happens to be 910px.

I'm not sure how to return the current number of visible list items. Maybe something like this?

$('ul.sections').width($("ul.sections li").length() * $("ul.sections li").width());

Which obviously doesn't work yet. Any ideas?

Answer 1

.length is a property not a method, so just use $("ul.sections li").length like this:

$('ul.sections').width($("ul.sections li").length * $("ul.sections").width());

If you have multiple sections, this would be the jQuery 1.4+ version:

$('ul.sections').width(function(i, w) { return $(this).find('li').length * w; });

Answer 2

there is a :visible jQuery Selector

to get all visible <li>'s in ul.sections

$("ul.sections li:visible")

so now you can set your width

$("ul.sections").width($("ul.sections li:visible").length * $("ul.sections").width()));

Answer 3

use size()

http://api.jquery.com/size/