使用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）的一種更具體的形式，因為它只選擇第一級后代。