使用 jQuery 将类添加到 ul li 的每个级别

Question

我有这个嵌套的 ul，它们是父级 -> 子级 -> （大）子级。

如何使用 jQuery 来发现每个级别，并为其添加一个类，以便我可以为每个级别设置不同的样式？

会是这样的：

我不能用 CSS 做到这一点，因为它至少需要在 IE 7 上正常工作

<ul class="lista-regioes">
    <li class="cat-item cat-item-3 i-have-kids">
     <a href="http://localhost/poraidemochila/site/?local-destino=brasil" title="Ver todos os posts arquivados em Brasil">Brasil</a>
     <ul class="children">
        <li class="cat-item cat-item-13">
        <a href="#" title="#">Norte</a>
        </li>
        <li class="cat-item cat-item-4 i-have-kids">
        <a href="#" title="#">Sul</a>
        <ul class="children">
            <li class="cat-item cat-item-5">
                <a href="http://localhost/poraidemochila/site/?local-destino=parana" title="Ver todos os posts arquivados em Paraná">Paraná</a>
            </li>
        </ul>
    </li>
</ul>
    </li>
</ul>

.cat-item 和 .cat-item-# 类是动态生成的，所以我不能在 css 中使用它们 .i-have-kids 类是由我发现的以下 js 添加的 here

 $('li.cat-item:has(ul.children)').addClass('i-have-kids');

但它并没有真正起作用，因为它只是查找有子元素的元素，并且不按级别分隔，正如您在标记中看到的那样。

Answer 1

this.addClasses = function(parent, level) {
    // add a class to all <li> elements on this level:
    parent.children("li").addClass("cat-item-" + level);
    // find any child <ul> elements and run this function on them,
    // making sure to increment the level counter:
    if (parent.children("li").children("ul").length) {
        this.addClasses(parent.children("li").children("ul"), level + 1);
    }
};

// start off by selecting only the top-level <ul> elements:
this.addClasses($("body > ul"), 1);

Answer 2

实际上，您不需要通过类来设置菜单样式，您可以使用 > 选择器访问 css 中的级别。这就是我可能会这样做的方式。

但这不是问题，所以我在 javascript 中尝试了它。你想要的是一个递归函数。

像这样工作的东西：

function addLevelClass($parent, level) {
    // add a parent class to the ul
    $parent.addClass('parent-'+level);
    // fetch all the li's that are direct children of the ul
    var $children = $parent.children('li');
    // add a child class to the li
    $children.addClass('child-'+level);
    // loop trough each li
    $children.each(function() {
        // get the ul that is a direct child of the li
        var $sublist = $(this).children('ul');
        // if an ul was found
        if ($sublist.length > 0) {
            // add a class to the current li indicating there is a sub list
            $(this).addClass('has-sublist');
            // repeat the process for the sublist, but with the level one higher
            // = recursive function call
            addLevelClass($sublist, level+1);
        }
    });
}

// call the function to add level classes on the upper most ul
addLevelClass($('.list'), 1);

可能有更有效的方法来做到这一点（js 不是我的强项），但作为一个例子，我认为它应该可以正常工作。 （随时改进！）

我在这里设置了一个小例子： http://jsfiddle.net/Pevara/UPN33/

Answer 3

为什么不这样做：http://jsfiddle.net/Rpg88/

HTML

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

CSS

ul a { color:red; }
ul ul a {color:orange;}
ul ul ul a {color:lime;}