javascript - 动态多级each() jQuery

Question

我在使用 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++;
        });
    });
});

Answer 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'));