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

calculating the number of first level UL LI in a page using jquery

本文关键字：UL 一级 LI 计算 jquery 使用      更新时间：2023-09-26

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

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

更改 

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

自

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

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

来自jQuery文档：

选择由元素的"子"指定的所有直接子元素 由"父"指定。

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

子

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

相关文章：