Question

我有一个菜单，其中每个项目都有一个子菜单。菜单系统结构如下

<div id="leftNav">
    <ul class="level1">
        <li><a href="#">Link1</a>
            <ul class="level2" id="submenu01">
                <li class="deptName"><a href="#">Link1</a></li>
                <li><a href="#">Link1.1</a></li>
                <li><a href="#">Link1.2</a></li>
                <li><a href="#">Link1.3</a></li>
            </ul>
        </li>
        <li><a href="#">Link2</a>
            <ul class="level2" id="submenu02">
                <li class="deptName"><a href="#">Link2</a></li>
                <li><a href="#">Link2.1</a></li>
                <li><a href="#">Link2.2</a></li>
                <li><a href="#">Link2.3</a></li>
            </ul>
        </li>
    </ul>
</div>

其中.level2是子菜单。我需要在子菜单中为每个锚添加一个类，除了带有deptName类的li中的锚点。这很容易，但是，我需要这个类是“levelTwoLinkXX”，其中“XX”是第一个01，第二个02，依此类推。然后，对于不在deptName类中的第一个链接，从levelTwoLink01开始的每个level2都需要这样做。

我提出的javascript是：

$(function(){
    $('.level2 > li:not('.deptName') > a').each(function(){
        $(this).addClass('levelTwoLink0' + (index+1));
    });
});

问题是它从01开始，当它将类分配给＃submenu02时，索引是4.如何为每个新的子菜单重新启动它？

Answer 1

$('ul.level2').each(function() {
    $(this).find('li').not('.deptName').each(function(i) {
        $(this).find('a').addClass('levelTwoLink0' + (i+1));
    });
});

演示：http://www.jsfiddle.net/DAunT/3/

Answer 2

您的jQuery表达式不正确。在添加 deptName 类选择器时，您正在关闭jQuery String。

每个函数也可以使用一个参数来表示DOM中当前元素的索引。那么正确的代码应该是：

$('ul.level2').each(function() {
    $(this).find('li:not(.deptName) a').each(function(index){
      $(this).addClass('levelTwoLink0' + ( index + 1 ));
    });
});

您需要做的是首先循环遍历 level2 然后再遍历 li 。

http://api.jquery.com/each/

Answer 3

那样的东西？

$("li ul").each(function(i, e) {
  $("li:not('.deptName') a", this).addClass("levelTwoLink" + this.id.replace(/\D*/,''));
});

在无序列表中为每个锚添加一个类

3 个答案: