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

Question

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

这是代码：

$(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 selector来实现你的工作。

来自jQuery doc：

选择由“parent”指定的元素“child”指定的所有直接子元素。

作为CSS选择器，所有现代Web浏览器都支持子组合器，包括Safari，Firefox，Opera，Chrome和Internet Explorer 7及更高版本，但特别是Internet Explorer 6及更低版本不支持。 但是，在jQuery中，这个选择器（以及所有其他选择器）适用于所有支持的浏览器，包括IE6。

子组合子（E> F）可以被认为是后代组合子（EF）的一种更具体的形式，因为它只选择第一级后代。