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脚本，如果它具有基于无序列表中的级别的<a>，则会向<ul>添加一个类。因此，所有<a> + <ul>级别1将是“expandNav1”，级别2将是“expandNav2”，级别3将是“expandNav3”，依此类推。我现在使用的脚本不是这样的。它会在每个<a> <ul>上添加一个新号码。

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

如何更改它以查找它所在的级别？

Answer 1

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

$('#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类标记用于显示/隐藏更详细信息的链接（可扩展树视图，如果愿意），并且您只需要直接位于<ul>之前的链接要获得课程，那么你真的想要更像这样的东西：

$('#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);

将班级添加到<a> based on the level in a nested list</a>

2 个答案: