toggle vs add remove (v5)

Revision 5 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.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').selectable().trigger('click');
ready

Revisions

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