javascript - 使用jquery计算页面中第一级UL LI的数量

Question

我有一些 jquery，它将计算我菜单中的项目，并为 li 分配一个以 px 为单位的计算宽度。

代码如下:

$(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);
    });
});

问题是 listItems 显示为 38 个项目，它似乎计算出每一个 li 都是错误的。它应该只计算第一个 ul li 而不是子元素。

我能做些什么来阻止这种情况的发生吗？

Answer 1

改变

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

到

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

你需要jQery parent > child 选择器来完成你的工作。

来自 jQuery 文档:

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.