我怎樣才能得到在UL上下的長度爲

Question

請檢查這個URL。 http://devsite.itrheat.com/products/marin-heating-systems/

我想知道的是， 當你將鼠標懸停在左邊的菜單，如「房車，拖車」，「海洋暖氣..」，你可以看到子菜單，如「綠洲NE」，「 Oasis NE-S ..「。

所以我想要得到的子菜單的長度。 因爲我想使子菜單寬度相同。 所以如果我得到子菜單的長度，我可以使它們的寬度相同（子菜單寬度= 100％/子菜單長度）

請幫助我。

Answer 1

此代碼應該可以幫助你做到這一點。

var sublinks = document.getElementsByClassName("product-sub-links")[0]; 
var activeUl = sublinks.getElementsByClassName("active")[0]; 
var liLength = activeUl.getElementsByTagName("li").length; 

Answer 2

既然你通過主ID映射你的主菜單，子菜單=>子類比你可以這樣做：

$('.product-top-links li').mouseenter(function() { 
    var list = $('.product-sub-links .'+$(this).attr('id')+' li'); 

    // total elements as "length as count of elements" 
    console.log(list.length); 

    var totalWidth = 0; 

    $.each(list, function() { 
     totalWidth += $(this).outerWidth(); 
    }); 

    // total width as "length as all elements combined width" 
    console.log(totalWidth); 
}); 

只要確保你第一次顯示您的子菜單，只再算上寬度，作爲隱藏要素（即使它是由父母隱藏）將有0px寬度