向最接近的href添加一個類

Question

我正在使用jQuery將類添加到最接近href的類mitem。

，但它不工作...

的問題是，像這樣的代碼，它增加了行爲類所有一個菜單中的元素，而不僅僅是最近一個元素。

也許我應該使用別的東西？或者我編寫代碼的方式可能有問題？

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#nav").hover(function(){ 
    //$('ul li.current').addClass('act'); 
    $(this).closest("a.mitem").addClass("act"); 
    }, 
    function() { 
    $(".mitem").removeClass('act'); 
    } 
);  

}); 
</script> 

     <ul id="nav"> 
      <li><a href="#" class="mitem mhome" title="">home</a></li> 
      <li><a href="#" class="mitem mshop" title="">shop</a> 
       <ul class="child"> 
        <li class="mheader"></li> 
        <li><a href="#">Hard Drives</a></li> 
        <li><a href="#">Monitors</a></li> 
        <li><a href="#">Speakers</a></li> 
        <li><a href="#">Random Equipment</a></li> 
       </ul>    
      </li> 
     </ul> 

Answer 1

嘗試this您選擇匹配下，選擇第一後代：

$(this).find('a.mitem').first() 

DEMO

Answer 2

您要附加懸停事件對整個UI元素#nav，所以最接近的定位將始終是第一個，即使您使用實際的jQuery方法遍歷，如find()或children()

假設您想要的錨標記有當父元素懸停在添加類，你可以這樣做：

$('#nav>li').on('hover', function() { 
    $('.mitem').removeClass('act'); 
    $(this).find('a.mitem').addClass('act'); 
}); 

Answer 3

別人張貼的答案，然後刪除了它的一些原因，但它是唯一一個爲我工作，所以它在這裏：

$("#nav li").has("ul").hover(function(){ 
    $(this).addClass("current").children("ul").fadeIn(); 
    $(this).children("a.mitem:first").addClass("act"); 

}, function() { 
    $(this).removeClass("current").children("ul").hide(); 
    $(this).children("a.mitem:first").removeClass("act"); 

});