jquery-vs-vanilla-for

Benchmark created on

Preparation HTML

<div id="dog-gender" class="group toggle" data-value="female">
          <a href="#" class="btn btn-primary" data-group="gender" data-value="male">Male</a>
          <a href="#" class="btn btn-primary selected" data-group="gender" data-value="female">Female</a>
        </div><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var gender = $('#dog-gender a:first-child');
    
    gender.trigger('click');
    
    gender.on('click', toggleButton);

Test runner

Ready to run.

Testing in
TestOps/sec
vanilla
function toggleButton(e) {
var allToggles = e.target.parentNode.children;
      for(var i = 0, len = allToggles.length; i < len; i++) {
        $(allToggles[i]).toggleClass('selected');
      }
}
ready
jquery
function toggleButton(e) {
$(e.target.parentNode.children).each(function(){
        $(this).toggleClass('selected');
      });
}
ready

Revisions

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