Question

好吧，我有这个嵌套的ul，它是父母 - ＆gt;孩子 - ＆gt; （大）子级，
如何使用jquery发现每个级别添加一个类，以便我可以不同地设置每个级别的样式 ？
（就像http://i.imgur.com/Zs3CYIg.png）我无法用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中使用它们我发现here

后面的js添加了班级.i-have-kids

 $('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;}

使用jquery为每个级别的ul li添加类

3 个答案: