jQuery count number of li's in each ul

Question

I am trying to add a width to LI elements based on how many li's there are e.g.

• first li has 5 children so width of children should be 20%
• second li has 4 children so width of children should be 25%;
• third li has 6 children so width of children should be 19%

I have got part way there with the following:

$(document).ready(function(){
 var count = $('#main-menu li ul > li').size();
 var width = 100/count;
 $('header nav#main-menu li ul li').css("width",width+"%");
});

The problem it's counting all the elements in total (including children). Is this possible?

Answer 1

$(document).ready(function(){
   $.each($('#main-menu li ul'), function() {
       var children = $(this).find(">li");
       var count = children.length;
       var width = 100/count;
       children.css("width", width + "%");
   });
});

Answer 2

This should do it:

$('#main-menu li ul').each(function() {
    var $children = $(this).children('li');
    var count = children.length;
    if (count) {
        $children.css('width', 100 / count + '%');
    }
});