toggle vs add remove (v4)

Revision 4 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul class="menu">
    <li id="one" class="active">One</li>
    <li id="two" class="inactive">Two</li>
    <li id="three" class="inactive">Three</li>
    <li id="four" class="inactive">Four</li>
    <li id="five" class="inactive">Five</li>
</ul>

Test runner

Ready to run.

Testing in
TestOps/sec
add remove
    $('.menu li').click(function () {
        $('.menu li').not(this).removeClass('active').addClass('inactive');
        $(this).addClass('active').removeClass('inactive');
    }).trigger('click');
ready
toggle
    $('.menu li').click(function () {
        $('.menu li').removeClass('active').addClass('inactive');
        $(this).toggleClass('active inactive');
    }).trigger('click');
ready
selectable
$('.menu li').click(function () {
    $('.menu li').not(this).removeClass('active');
    $(this).addClass('active');
}).trigger('click');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.