2013-04-30 35 views
0

偉大的Google和SO沒有提供有關這方面的搜索結果。有些是相似的,但沒有讓我在那裏。計數子菜單項jQuery沒有CSS類

我需要做一個無階級的子菜單會以設置基於子列表項的數量最小寬度屬性樣式屬性附加到每一個人<li>在子<ul>的。

的HTML

<nav> 
<ul> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">ABOUT COMPANY</a></li> 
    <li> 
    <a href="#" class="sub">ABOUT PRODUCT</a> 
    <ul> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
    </ul> 
    </li> 
    <li><a href="#">GETTING STARTED</a></li> 
    <li> 
    <a href="#" class="sub">PATIENT SUPPORT</a> 
    <ul> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
     <li><a href="#">Item 3</a></li> 
    </ul> 
    </li> 
    <li><a href="#">CONTACT</a></li> 
    <li><a href="#">eUPDATES</a></li> 
</ul> 
</nav> 

JavaScript的

$('.sub').text(function() { 
    var count = $(this).next().find('li').length; 
    var totalwidth = count * 115; 
    $(this).next().find('li').parent('ul').attr('style','min-width:'+totalwidth+'px'); 
}); 

我需要能夠做到這一點,而不基於搜索關閉類 「分」。我試了幾次,但沒有一個看起來像我目前使用的代碼一樣強大。我正在使用的後端開發人員要求它們都是簡單的<ul><li></li></ul>結構,沒有類。

如果有人能幫助我指出正確的方向,我將非常感謝您的時間和幫助!

回答

1

目標包含UL的所有鋰項目,發現李的在這些UL的數量,並繁殖的寬度:

$('ul', 'li').css('min-width', function() { 
    return ($(this).find('li').length * 115) + 'px'; 
}); 
+0

那是我去另一條路線。但是,問題是$('。sub')部分。我根本無法得到。我需要獲取當前分類爲$('。sub')的所有元素,而不再需要該類。 – lxndr 2013-04-30 21:15:09

+0

@lxndr - 好的,那將包含所有包含孩子UL等的LI。 – adeneo 2013-04-30 21:24:43