jquery - jQuery を使用して ul li の各レベルにクラスを追加する

Question

親 - >子 - >（孫）子レベルであるこのネストされたulがあります。

jQuery を使用して、クラスを追加するすべてのレベルを見つけて、各レベルを異なるスタイルにするにはどうすればよいですか?

次のようになります。

少なくともIE 7ではうまく動作する必要があるため、CSSではできませんでした

<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 によって追加されます。

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

このようなことをしてみませんか: 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;}