jqueryを使用してクリックした子リンクをキャプチャする方法は？

Question

子要素のリンクがクリックされたときにイベントをキャプチャし、 "highlightchild"というクラスを追加しようとしています。また、子要素のリンクが存在しないかどうかをチェックしたい場合は、子要素が存在しない場合、つまり、親の「highlightparent」を持つ「第3レベル」のハイライトが必要です。 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 sのクラス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

わかりませんあなたの2番目の部分（それを言い換えたり、明確にすることはできますか？）を使用しますが、私は.delegate()を使用します：

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

これは、イベントハンドラのみをメニューのルートに追加します。