2012-03-13 17 views
9

tutaj jest HTML:jQuery dodać klasę do bieżącego li i usunąć prev li gdy kliknięcie wewnątrz li

<ul>  
    <li class="current"><a href="#">menu item</a></li> 
    <li><a href="#aba">menu item</a></li> 
    <li><a href="#abb">menu item</a></li> 
    <li><a href="#abc">menu item</a></li> 
    <li><a href="#abd">menu item</a></li> 
</ul> 

gdybym naciśnij 'A' odnośnik Będzie addClass 'aktualny' do klikniętego li i usunąć starą li class ? to moja próba:

$('ul li a').click(function(){ 
    $('ul li').removeClass('current'); 
    ... don't know here (add class to current li) ... 
}); 
+0

jQuery ma wielką dokumentację, która jest warta odczytu: http://api.jquery.com/category/traversing/ –

+0

NVM got to dzięki Rob – test

Odpowiedz

29

Zastosowanie .parent('li') lub .closest('li') wybrać kliknięciu <li>.

$('ul li a').click(function() { 
    $('ul li.current').removeClass('current'); 
    $(this).closest('li').addClass('current'); 
}); 
+0

dzięki działało dobrze – test

0

Wystarczy dodać klasę do this jak tak ...

$(this).addClass('yourClass'); 
+1

'this' jest element ''. –

6

Wykorzystanie na ('kliknięcie'), jeśli używasz najnowszej wersji jQuery

$('ul li a').on('click', function(){ 
    $(this).parent().addClass('current').siblings().removeClass('current'); 
}); 

ryba jest here.

2

Rob ma rację, ale $('ul li.current').removeClass('current'); nie działa dla mnie. Działa następujący kod.

jQuery('ul li a').click(function() 
{ 

jQuery('ul').children().removeClass('selected'); 
jQuery(this).closest('li').addClass('selected'); 

}