【问题标题】:Dynamic multilevel each() jQuery动态多级 each() jQuery
【发布时间】:2013-04-21 15:27:39
【问题描述】:

我在使用 jQuery 创建多级 each() 时遇到问题。这是我的代码,但仅限于 3 个级别。我想让它适用于无限关卡。

这是一个 JsFiddle 演示链接:http://jsfiddle.net/cWJH5/1/

HTML

<nav id="navMenu">
    <ul>
        <li><a href="#">DEMO</a>
        </li>
        <li><a href="#">DEMO</a>
        </li>
        <li><a href="#">DEMO</a>

            <ul>
                <li><a href="#">DEMO</a>
                </li>
                <li><a href="#">DEMO</a>
                </li>
                <li><a href="#">DEMO</a>

                    <ul>
                        <li><a href="#">DEMO</a>
                        </li>
                        <li><a href="#">DEMO</a>
                        </li>
                        <li><a href="#">DEMO</a>

                            <ul>
                                <li><a href="#">DEMO</a>
                                </li>
                                <li><a href="#">DEMO</a>
                                </li>
                                <li><a href="#">DEMO</a>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

JS

Startlevel = 0;  
$('#menu > ul').each(function (i) {
    $(this).addClass('item-' + i + ' level-' + Startlevel );
    menuLevel++;
    $(this).find('> li > ul').each(function (i) {
        $(this).addClass('item-' + i + ' level-' + Startlevel );
        menuLevel++;
        $(this).find('> li > ul').each(function (i) {
            $(this).addClass('item-' + i + ' level-' + Startlevel );
            menuLevel++;
        });
    });
});

【问题讨论】:

    标签: javascript jquery loops recursion each


    【解决方案1】:

    我认为你需要像下面这样的递归函数。演示:http://jsfiddle.net/x5WDc/

    var level = 0;
    
    var assign_classes = function (list) {
      list.each(function (i) {
        $(this).addClass('item-' + i + ' level-' + level);
        level++;
        assign_classes($(this).find('> li > ul'));
        level--;
      });
    };
    
    assign_classes($('#menu > ul'));
    

    【讨论】:

    • 是否可以在同一个函数中将item + i 添加到所有“li”
    【解决方案2】:

    也许就是这样:

    SEE DEMO

    $('#menu ul').each(function () {
        var Startlevel = $(this).parents('#menu ul').length;
        $(this).addClass('item-' + $('#menu ul.level-' + Startlevel).length + ' level-' + Startlevel);
    
    });
    

    【讨论】:

      猜你喜欢
      • 2011-02-27
      • 1970-01-01
      • 2017-08-16
      • 2014-03-04
      • 2016-09-09
      • 1970-01-01
      • 2013-07-01
      • 2015-06-20
      • 2012-12-07
      相关资源
      最近更新 更多