jquery를 사용하여 클릭 한 하위 링크를 캡처하는 방법은 무엇입니까?

Question

하위 요소 링크를 클릭 할 때 이벤트를 캡처하고 "highlightchild"라는 클래스를 추가하려고합니다. 또한 자식 요소 링크가 존재하지 않거나 존재하지 않는지 확인하고 싶습니다. 자식 요소가 없으면 부모의 "highlightparent"가있는 "third level"강조 표시가 나타납니다. jquery를 사용하여 어떻게 할 수 있습니까?

$(document).ready(function() { 
    $('.menu ul').hide(); 
    $('.menu .arrowUp').click(function() { 
    $('.menu ul').hide(); 
    $(this).find(".third-level").toggle(); 
    }); 
}); 

HTML

<ul class="menu"> 
<li class="arrowUp"><a href="#">link1</a> 
<ul class="third-level" >    
<!-- third level non-active --> 
    <li class="arrowUp"><a href="/somelink/">Some Link</a></li> 
</ul> 
</li> 
<li class="arrowUp"><a href="#">link2</a> 
<ul class="third-level" >    
<!-- third level non-active --> 
    <li class="arrowUp"><a href="/links2/">some Links 2</a></li> 
</ul> 
</li> 
<li class="arrowUp"><a href="#">link3</a> 
<ul class="third-level" > 
<!-- third level non-active --> 
    <li class="arrowUp"><a href="/Agri/">Agricultural</a></li> 
    <!-- third level non-active --> 
     <li class="arrowUp"><a href="/sugar/">Sugar</a></li> 
    <!-- third level non-active --> 
     <li class="arrowUp"><a href="/bbc/">Coffee</a></li> 
     <!-- third level non-active --> 
     <li class="arrowUp"><a href="/cnn/">Energy</a></li> 
     <!-- third level non-active --> 
     <li class="arrowUp"><a href="funstuff">Fun stuff</a></li> 
    </ul> 
</li> 
<li class="arrowUp"><a href="#">link4</a></li> 
<li class="arrowUp"><a href="#">link5</a></li> 
<li class="arrowUp"><a href="#">link6</a></li> 
</ul> 

Answer 1

// add hightlightChild class to children anchor tags on click 
$('.parent_link > a').click(function(){ 
    $(this).addClass('highlightChild'); 
    return false; // or not if you want to follow the link 
}); 

// loop over each parent link and highlight it if no children links exist 
$('.parent_link').each(function(){ 
    if ($(this).children('a').size() > 0){ 
    $(this).addClass('highlightParent'); 
    } 
}); 

Answer 2

방법에 대해 :

$(".arrowUp > a").bind("click", function(event) { 
    event.preventDefault(); 
    if ($(this).closest(".third-level").length > 0 || 
     $(this).siblings().length === 0) { 
     $(this).addClass("highlight"); 
    } 
}); 

없는 형제 a들과 클래스 third-level, 또는 링크와 함께 부모와 모든 링크.

http://jsfiddle.net/andrewwhitaker/bMupR/

편집 : 여기에 해당 할 것입니다 방법, 서로 다른 부모/자식 강조 클래스를 원 통지를하지 않았다 : 당신이 무엇을 의미하는지

$(".arrowUp > a").bind("click", function(event) { 
    event.preventDefault(); 
    if ($(this).closest(".third-level").length > 0) { 
     $(this).addClass("childhighlight"); 
    } 
    else if ($(this).siblings().length === 0) { 
     $(this).addClass("parenthighlight"); 
    } 
}); 

http://jsfiddle.net/andrewwhitaker/bMupR/1/

Answer 3

확실하지 않음 두 번째 부분은 (다시 말하고 명확하게 할 수 있습니까?) 그러나 나는 .delegate()을 사용합니다 :

$('ul.menu').delegate('a', 'click', function() { 
    $('ul.menu .highlightchild').removeClass('.highlightchild'); 
    $(this).addClass('.highlightchild'); 
}); 

이렇게하면 이벤트 처리기 만 메뉴 루트에 추가됩니다.