将类添加到 ;基于嵌套列表中的级别

Question

<div id="ContentLeftNav"><ul class="menu">
    <li class=""><a href="#" class=" ">Test Page</a></li>
    <li class=""><a href="#" class=" ">Test Page</a></li>
    <li class=""><a href="#" class="expandNav ">Test Page</a>
            <ul class="submenu">
                    <li class=""><a href="#" class=" ">Test Page</a></li>
                    <li class=""><a href="#" class="expandNav2">Test Page</a>
                         <ul class="submenu2">
                            <li class=""><a href="#" class=" ">Test Page</a></li>
                            <li class=""><a href="#" class=" ">Test Page</a></li>
                         </ul>
                    </li>
                    <li class=""><a href="#" class=" ">Test Page</a></li>
                    <li class="last"><a href="#" class=" ">Test Page</a></li>
             </ul>
     </li>
    <li class=""><a href="#" class=" ">Test Page</a></li>
    <li class=""><a href="#" class="expandNav">Test Page</a>
            <ul class="submenu">
                    <li class=""><a href="#" class="expand2">Test Page</a></li>
                        <ul class="submenu2">
                            <li class=""><a href="#" class=" ">Test Page</a></li>
                            <li class=""><a href="#" class=" ">Test Page</a></li>
                        </ul>
                    <li class=""><a href="#" class=" ">Test Page</a></li>
            </ul>
    </li>
    <li class="last"><a href="#" class=" ">Test Page</a></li></ul></div>

我正在寻找 jQuery 脚本，如果它有一个基于无序列表中级别的

，它将向 添加一个类。因此，所有 +
级别 1 将为“expandNav1”，级别 2 将为“expandNav2”，级别 3 将为“expandNav3”，所以在。我现在使用的脚本不是这样工作的。它使用
在每个 上添加一个新数字。

$('#ContentLeftNav ul').each(function() {
$(this).find('li:has(ul)').each(function(i) {
    $(this).find('a').addClass('expandNav' + (i+1));
});});

我怎样才能改变它来寻找它所在的级别？

Answer 1

您可以在每个链接上使用与 .length 绑定的 .parents() 函数：

$('#ContentLeftNav a').each(function() {
    $(this).addClass('expandNav' + $(this).parents('#ContentLeftNav ul').length);
});

但如果您只是将其用于样式设置，则可能需要考虑使用纯 CSS ，并完全跳过 JS：

#ContentLeftNav ul a {...}
#ContentLeftNav ul ul a {...}
#ContentLeftNav ul ul ul a {...}
/* And so forth. */

更新：

我想我误解了原来的问题。如果您使用 .expandNav 类来标记用于显示/隐藏更详细信息的链接（可扩展的树视图，如果您愿意的话），并且您只需要直接位于 < code>

来获取类，那么您实际上想要更多类似这样的东西：

$('#ContentLeftNav a + ul').each(function() {
    // $(this) is the ul, so $(this).prev() is the a:
    $(this).prev().addClass('expandNav' + $(this).parents('#ContentLeftNav ul').length);
});

希望这有帮助！

Answer 2

您可以使用递归（= 调用自身）函数来完成此操作：

/* 
    Recursive loop though UL list
*/

function loopDown($obj, x){

    // Store our current jquery objects
    var $sub = $obj.children('ul').children('li:has(ul)');
    var $a = $sub.children('a');

    // Test is we need to continue loop - if not the function ends itself.
    if ($sub){

        if (x !== 0) {
            $a.addClass('expandNav'+x);
        }

        else {
            $a.addClass('expandNav');
        }

        //Incriment counter
        x++;

        $sub.each(function(){
            // Call the function one down the line...
            loopDown($(this), x);           
        });         
    }       
}

// Run our function, pass it the jQuery object and a starting counter.
loopDown($('#ContentLeftNav'), 0);