不同類添加到選定的鏈接

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') 

});