jquery list item class toggle

Question

I have a simple function to toggle list item class from \"active\" to \"inactive\". What is the most efficient way (i.e., using the least amount of code) to set all other list i

Answer 1

If SEO is not important and to use the less amount of code I would say use a radio-button list. Then you can style and interact in JavaScript by using the ":checked" selector.

Answer 2

If you're already using jQuery UI, you can take advantage of the selectable function. That would get you what you want with the least amount of code. http://jqueryui.com/selectable/

Answer 3

This can work:

$('.menu li').click(function () {
    $('.menu li').not(this).removeClass('active').addClass('inactive');
    $(this).addClass('active').removeClass('inactive');
});

or

$('.menu li').click(function () {
    $('.menu li').removeClass('active').addClass('inactive');
    $(this).toggleClass('active inactive');
});

The second method is shorter, but slower.

http://jsperf.com/toggle-vs-add-remove

Edit: This one is shorter and faster:

$('.menu li').click(function () {
    $('.menu li').not(this).removeClass('active');
    $(this).addClass('active');
});

If performance is really a problem you can store your menu in a variable and perform operations on this variable, like:

var $menu = $('.menu li');
$menu.click(function () {
        $menu.not(this).removeClass('active');
        $(this).addClass('active');
    });

Answer 4

For brevity:

$('ul.menu li').click(function () {
    $(this).siblings().attr('class', 'inactive').end().toggleClass('inactive active');
});

JS Fiddle demo (127 characters, whitespace-removed character-count: 115).

Character-counts at JS Fiddle, since brevity was the intent, it seems.

Unfortunately, given the problem identified in the comments, below, a corrected implementation is somewhat more verbose than the (currently-accepted answer), alternatives being:

$('ul.menu li').click(function () {
    var t = this;
    $(this).siblings().add(t).attr('class', function (){
        return t === this ? 'active' : 'inactive';
    });
});

JS Fiddle demo (174 characters, whitespace-removed character-count: 133).

Or:

$('ul.menu li').click(function () {
    var t = this;
    $(this).parent().children().attr('class', function (){
        return t === this ? 'active' : 'inactive';
    });
});

JS Fiddle demo (176 characters, whitespace-removed character-count: 135).

Of course, white space-removed jQuery does become somewhat unreadable, but still: I claim the, uh, moral victory...

References:

• add().
• attr().
• children().
• end().
• siblings().
• toggleClass().

Answer 5

$('ul li').click(function() {
    $('ul li').each(function() {
       $(this).removeClass('active'); 
    });
    $(this).addClass('active');  
});

JSFiddle