动态multilevel each()jQuery

时间:2013-04-27 15:08:03

标签: javascript jquery loops recursion each

我在使用jQuery创建多级()时遇到问题。这是我的代码,但这仅限于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++;
        });
    });
});

2 个答案:

答案 0 :(得分: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'));

答案 1 :(得分:1)

也许只是这个:

SEE DEMO

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

});