jQuery hide() versus each() hide()

Benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="container">
</div>
<script>
  for (var i = 0; i < 5; i++) {
    $('#container').append('<div class="item">' + i + ' foo</div>');
  }
  
  var $items = $('div.item')
  $('#container').append('<div class="foo">$items: ' + $items.length + '</div>')
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Each hide
$('div.item').each(function() {
  $(this).hide();
})

$('div.item').each(function() {
  $(this).show();
})
ready
Hide
$('div.item').hide();
$('div.item').show();
ready
Chained
$('div.item').hide().show();
ready
Cached
$items.hide();
$items.show();
ready
Cached and chained
$items.hide().show();
ready
For loop
var $foo = $('div.item');
for (var i = 0; i < $foo.length; i++) {
  $($foo[i]).hide();
}
$foo = $('div.item');
for (i = 0; i < $foo.length; i++) {
  $($foo[i]).show();
}
ready

Revisions

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