JQuery 부모가 아닌 현재 li만을 선택하는 방법

Question

JQuery를 사용하여 부모가 아닌 현재 li을 어떻게 선택합니까?

아래 예제에서 부모 li이있는 li 위에 마우스를 올리면 현재 li뿐 아니라 부모에 'world'가 표시됩니다.

저는 현재 li에 'world'만 표시하고 싶습니다.

어떻게하면됩니까?

스타일 :

a.show-anyway 
{ 
    display: block; 
} 
a.world 
{ 
    display: none; 
} 
a.active 
{ 
    display: block; 
} 

목록 항목 :

<ul class="currentlist"> 
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a> 
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a> 
<ul> 
    <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li> 
    <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li> 
</ul> 
</li> 
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li> 
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a> 
<ul> 
    <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li> 
    <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li> 
</ul> 
</li> 
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li> 

JQuery와는 :

$(document).ready(function() { 
    $('.currentlist li').hover(function() { 
    $(this).find('a').addClass('active'); 
    }, function() { 
    $(this).find('a').removeClass('active'); 
    }); 
}); 

Answer 1

는 다음과 같이, 아이를 떠나/입력 할 때 당신은 클래스를 부모를 크롤링하고 추가/제거해야합니다

$(function() { 
    $('.currentlist li').hover(function() { 
    $(this).children('a').addClass('active').end() 
      .parents().children('a').removeClass('active'); 
    }, function() { 
    $(this).children('a').removeClass('active').end() 
      .parents().children('a').addClass('active'); 
    }); 
});​ 

You can give it a try here을,이 부모를 크롤링하고에서 클래스를 제거 자신의 <a> 어린이는 들어갈 때 데모를 시도하고 떠날 때 복원합니다. 나는 이것이 당신이 겪은 일이라고 생각합니다.

Answer 2

나는 문제가 eventbubbeling과 생각, 나는 그것을 함께 놀았 비트는에과 약간의 개선 사항을 발견했습니다.

$(document).ready(function() { 
    $('.currentlist li').hover(function(evt) { 
    $(this).children('a.world').addClass('active'); 
     evt.stopPropagation() 
    }, function(evt) { 
    $(this).children('a.world').removeClass('active'); 
    }); 
});​ 

Answer 3

이 솔루션의 가장 좋은 것이 아니라 어쩌면 그것은 당신이 더 좋은 방법을 찾는 데 도움이됩니다 : JQuery와 부분이보십시오.

jsfiddle.net/s7TaT

Answer 4

"아이 li"을 유혹하는 경우, 당신은 여전히 ​​그 부모를 유혹하고 있습니다. 따라서 jQuery 함수는 정확히 당신이 말한 것을 수행합니다 :-)

실제 "li"에 'active'css 클래스를 추가하려는 경우 'active'클래스를 해당 " 부모 lis ".

나는 태그에 클래스를 추가하지 않는 것이 좋습니다,하지만 리튬 자체에

은 여기를보세요 (실제로 활성화 된 공중 선회 리, 거기에 단지 하나 개의 링크입니다)

: http://jsfiddle.net/rCYAm/