不同类添加到选定的链接

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> 

在这里，我有哪些选择链接选择类。我需要的是，我想向父母li <li><a href="">Lengthy</a>，其顶级父母<li><a href="">Top</a>及其顶级父母<li><a href="">Women</a>

添加一个班级。所有父母应该有不同的班级。

请在这里找到小提琴：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'只检索所有李氏父母。

Answer 2

您可以尝试

$(document).ready(function() { 
$("a").attr("href", "#"); // kind of disable all links 
$("a").click(function() { 
    $("a").removeClass("selected"); 
    $(this).addClass("selected"); 
    $(this).parents("a").addClass("selected"); 
}); 

}）;

你的html的问题是，<a>不是父母，而是下一个ul的兄弟姐妹。

Answer 3

正如我在评论中说，如果你想添加一个数字增加类，您可以使用（但后来删除这些类将是困难的）

$(document).ready(function() { 
 
    var $selected = $('.selected'); 
 

 
    var $parents = $selected.parent().parents('li'); 
 
    $parents.children('a').addClass(function(i) { 
 
    return 'parent-' + (i + 1) 
 
    }); 
 

 
});

.selected { 
 
    color: #FF0000; 
 
} 
 
.parent-1 { 
 
    color: #00FF00; 
 
} 
 
.parent-2 { 
 
    color: #0000FF; 
 
} 
 
.parent-3 { 
 
    color: #FF00FF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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>

---

另一种方法将是

$(document).ready(function() { 
 
    var $selected = $('.selected'); 
 

 
    $selected.parent().parents('li').addClass('parent'); 
 

 
});

.selected { 
 
    color: #FF0000; 
 
} 
 
.parent > a { 
 
    color: #00FF00; 
 
} 
 
.parent .parent > a { 
 
    color: #0000FF; 
 
} 
 
.parent .parent .parent > a { 
 
    color: #FF00FF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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>

Answer 4

这是另一个fiddle如果您需要添加不同的类到每个家长。但是，此代码可以进行优化。

$(document).ready(function() { 
    var curr_parent= $(document).find("a.selected").parent(); 
    var parent1= $(curr_parent).parent().closest('li'); 
    $(parent1).addClass('parent1') 
    var parent2 = $(parent1).parent().closest('li'); 
    $(parent2).addClass('parent2') 
    var parent3 = $(parent2).parent().closest('li'); 
    $(parent3).addClass('parent3') 

});