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

发布于 2024-10-18 11:31:10 字数 2574 浏览 5 评论 0原文

<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 脚本,如果它有一个基于无序列表中级别的

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

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

<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>

I'm looking for jQuery script that will add a class to the <a> if it has a <ul> based on the level it is in the unordered list. So all <a> + <ul> Level 1 would be "expandNav1" and level 2 would be "expandNav2" and level 3 would be "expandNav3" and so on. The script I'm using now is not working that way. It adds a new number on every <a> with <ul>.

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

How can I change it to look for level it is in?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

夏日浅笑〃 2024-10-25 11:31:10

您可以在每个链接上使用与 .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);
});

希望这有帮助!

You could use the .parents() function tied with .length on each link:

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

But if you're just using this for styling, you might want to consider using plain CSS, and skipping the JS altogether:

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

Update:

I think I misunderstood the original question. If you're using the .expandNav class to mark links that are used to show/hide more detailed info (an expandable tree view, if you will), and you only want the links that directly precede <ul>s to get the class, then you actually want something more like this:

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

Hope this helps!

日裸衫吸 2024-10-25 11:31:10

您可以使用递归(= 调用自身)函数来完成此操作:

/* 
    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);  

You can do it with a recursive (= calls itself) function:

/* 
    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);  
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文