toggle vs add remove (v3)

Revision 3 of this benchmark created on

Preparation HTML

<script src="//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

Revisions

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