jQuery add class to current li and remove prev li when click inside li a

Question

here is html:

    
    
menu item
  
    
menu i         


        

Answer 1

Use .parent('li') or .closest('li') to select the clicked <li>.

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

Answer 2

Maybe you mean this?

$('ul li').each(function(){
  var t = $(this);
  t.find('a').click(function() {
    $('ul li').removeClass('current');
    t.addClass('current');
  });
});

Answer 3

$(function(){

   $('ul li a').click(function(){
      var item=$(this).parent();
       $('ul li').removeClass('current');
       item.addClass("current")
    });

});​

http://jsfiddle.net/z8DYP/3/

Answer 4

Rob is right but $('ul li.current').removeClass('current'); didn't work for me. Following code works.

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

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

}

Answer 5

Use on('click') if you are using latest version of jquery

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

A fiddle is here.

Answer 6

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

Hope, this will works for you..