Wie erfasst man untergeordnete Links, die mit jquery geklickt wurden?

Question

Ich versuche, das Ereignis zu erfassen, wenn ein Child-Element-Link angeklickt wird und fügen Sie die Klasse "highlightchild" hinzu. Ich möchte auch überprüfen, ob es einen untergeordneten Elementlink gibt oder nicht, wenn kein untergeordnetes Element existiert, dh "dritte Ebene" wird mit "highlightparent" hervorgehoben. Wie kann ich das mit jquery tun?

$(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

Wie wäre:

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

alle Verbindungen mit einem Elternteil mit Klasse third-level oder Links ohne Geschwister a s.

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

Edit: Haben Sie nicht andere Eltern/Kind-Highlight Klassen, hier ist, wie Sie das tun würde, wollte:

$(".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

nicht sicher, was Sie gemeint mit Ihrem zweiten Teil (könnte es umformulieren und/oder klären?), aber ich würde .delegate():

012 verwenden

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

Dies fügt nur einen Event-Handler zum Wurzel des Menüs hinzu.