javascript - 为所选链接的所有级别的父级添加不同的类

Question

以下是我的html

<ul>
<li>
    <a href="">Women</a>
    <ul>
        <li><a href="">Top</a>
            <ul>
                <li><a href="">Short</a></li>
                <li><a href="">Lengthy</a>
                    <ul>
                        <li><a class="selected" href="">Child Parent</a></li>
                        <li><a href="">Child Parent</a></li>
                        <li><a href="">Child Parent</a></li>
                        <li><a href="">Child Parent</a></li>
                    </ul>
                </li>
                <li><a href="">Medium</a></li>
                <li><a href="">Full Sleve</a></li>
            </ul>
        </li>
        <li><a href="">Casuals</a></li>
        <li><a href="">Jeans</a></li>
        <li><a href="">Kurthah</a></li>
    </ul>
</li>
<li><a href="">Men</a>
    <ul>
        <li><a href="">Top</a></li>
        <li><a href="">Casuals</a></li>
        <li><a href="">Jeans</a></li>
        <li><a href="">Kurthah</a></li>
    </ul>
</li>
<li><a href="">Children</a></li>
<ul>

这里我有一个类 selected 用于选择一个链接。我需要的是，我想给父类添加一个类 li <li><a href="">Lengthy</a> , 它的顶级 parent <li><a href="">Top</a>及其顶级父级 <li><a href="">Women</a>

所有的 parent 都应该有不同的类(class)。

请在这里找到 fiddle :http://jsfiddle.net/w3pjrxff/2/

Answer 1

试试这个:

$(document).ready(function() {
    $(document).find("a.selected").each(function(){
        $(this).parents("li").each(function(i, v){
            $(v).addClass('newPar' + i);
        });
    });
});

其中 i 是索引(0、1、2 等，对于不同的类别)，jQuery.parents()获取所有父元素，使用参数 'li' 它只检索所有 li 父元素。