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 选择器才能完成工作。

来自jQuery doc：

选择＆＃34; child＆＃34;指定的所有直接子元素。元素   由父母＆＃34;。
指定
作为CSS选择器，所有现代网络都支持子组合器   浏览器包括Safari，Firefox，Opera，Chrome和Internet   Explorer 7及更高版本，但特别是Internet Explorer版本6   以下。但是，在jQuery中，这个选择器（以及所有其他选择器）   适用于所有支持的浏览器，包括IE6。

儿童组合子（E> F）可以被认为是更具体的形式   后代组合子（E F）的结果是它只选择第一级   后代。

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

1 个答案: