自動將「高度」數據，以子菜單的使用jQuery

Question

我有一個相當簡單的菜單結構，深度只有一層，使用UL/LI的如下......

• 菜單項目1
• 菜單項由2
• 菜單項3
  • 子項1
  • 子項目2
  • 子項目3
• 菜單項4

如下所示的垂直口魚演示菜單是用轉出懸停顯示以垂直方式，在完全相同的基本格式：http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html

什麼我想要做的是使用jQuery自動將類應用到每個子菜單的LI中，並使用菜單項的相應高度。例如，子項目1在菜單項目3旁邊，這將使其成爲'高度'3.子項目2具有4的「高度」。菜單項目4的子菜單2將具有5的「高度」。等等。

我這樣做的原因是子菜單項需要有一個適合背景的CSS樣式 - 菜單是彎曲的 - 所以他們需要應用一個類，以便樣式對他們來說是正確的高度。

我相當確定所需的代碼不應該太大 - 它只需要爲每個子li添加樣式「height1」或「height2」等的類，我不能想到哪裏開始我自己，因爲我的JavaScript技能仍然有點簡陋！

在此先感謝！

Answer 1

這樣的事情應該會有所斬獲。只需將#nav換成您的UL的ID即可。此外，這假定零索引高度（高度0，高度1，高度2等）。

function applyHeightClasses(el, offset){ 
    if(! (offset > 0)) offset = 0; 

    $(el).children('li').each(function(i) { 
    $(this).addClass('height' + (offset + i)); 

    $(this).children('ul').each(function(x) { 
     applyHeightClasses(this, (offset + i + x)); 
    }); 

    }); 
} 

$(document).ready(function() { 
    applyHeightClasses('#nav'); 
});