1

我有一些 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 不是子元素。

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

4

1 回答 1

4

改变

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

到

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

您需要 jQery父 > 子选择器来完成您的工作。

来自 jQuery 文档：

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

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

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

于 2012-06-27T13:38:43.313 回答