Question

I have some jquery which will calculate the items in my menu and assign the li with a calculated width in px.

here is the code:

$(document).ready(function(){
    $('div#new-menu-lower ul li').css('width', ($('div#new-menu-lower ul').width() / $('div#new-menu-lower ul li').length));
    $(function() {
        var menuWidth = $('div#new-menu-lower ul').width();
        var listItems = $('div#new-menu-lower ul li').length;
        var itemWidth = Math.floor(menuWidth * (1/listItems)) - 40;
        $('div#new-menu-lower ul li').css('width', itemWidth);
    });
});

The problem is listItems shows up as 38 items and it seems to calculate every single li which is wrong. It should just count the first ul li’s NOT the child elements.

Is there anything i can do to stop this happening?

Answer 1

Change

var listItems = $('div#new-menu-lower ul li').length;

to

var listItems = $('div#new-menu-lower > ul > li').length;

You need jQery parent > child selector to achieve your job.

From jQuery doc:

Selects all direct child elements specified by “child” of elements
specified by “parent”.

As a CSS selector, the child combinator is supported by all modern web
browsers including Safari, Firefox, Opera, Chrome, and Internet
Explorer 7 and above, but notably not by Internet Explorer versions 6
and below. However, in jQuery, this selector (along with all others)
works across all supported browsers, including IE6.

The child combinator (E > F) can be thought of as a more specific form
of the descendant combinator (E F) in that it selects only first-level
descendants.