有没有更好的方法来编写以下内容,最好有无限的子级别......?
$('#menu-primary-navigation li > ul.sub-menu').addClass('lvl-1');
$('#menu-primary-navigation li li > ul.sub-menu').removeClass('lvl-1').addClass('lvl-2');
$('#menu-primary-navigation li li li > ul.sub-menu').removeClass('lvl-2').addClass('lvl-3');
$('#menu-primary-navigation li li li li > ul.sub-menu').removeClass('lvl-3').addClass('lvl-4');
请注意,整个菜单是动态创建的,因此我无法手动将类添加到每个级别。
这是起始代码的示例:
<ul id="menu-primary-navigation" class="menu">
<li><a href="#">Top Level</a></li>
<li><a href="#">Top Level</a>
<ul class="sub-menu">
<li><a href="#">Sub-level 1</a></li>
<li><a href="#">Sub-level 1</a></li>
</ul>
</li>
<li><a href="#">Top Level</a>
<ul class="sub-menu">
<li><a href="#">Sub-level 1</a>
<ul class="sub-menu">
<li><a href="#">Sub-level 2</a>
<ul class="sub-menu">
<li><a href="#">Sub-level 3</a>
<ul class="sub-menu">
<li><a href="#">Sub-level 4</a></li>
<li><a href="#">Sub-level 4</a></li>
</ul>
</li>
<li><a href="#">Sub-level 3</a></li>
</ul>
</li>
<li><a href="#">Sub-level 2</a></li>
</ul>
</li>
<li><a href="#">Sub-level 1</a></li>
</ul>
</li>
</ul>