jQuery: hide all or some

Benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<ul id="ul">
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests" href="#">link</a></li>
<li><a id="tester" class="tests hide" href="#">link</a></li>
<li><a id="tester" class="tests hide" href="#">link</a></li>
<li><a id="tester" class="tests hide" href="#">link</a></li>
<li><a id="tester" class="tests hide" href="#">link</a></li>
<li><a id="tester" class="tests hide" href="#">link</a></li>
<li><a id="tester" class="tests hide" href="#">link</a></li>
<li><a id="tester" class="tests hide" href="#">link</a></li>
<li><a id="tester" class="tests hide" href="#">link</a></li>
<li><a id="tester" class="tests hide" href="#">link</a></li>
<li><a id="tester" class="tests hide" href="#">link</a></li>
</ul>

<a id="clickme" href="#">click me</a>

<script>
$ul = $('#ul');
$a = $('.tests');
$aHide = $('.hide');
$clickme = $('#clickme');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Remove class 'hide' from all elements
$clickme.click(function() {
    $ul.find('li').removeClass('hide');
});
ready
Remove class 'hide' from elements that have it
$clickme.click(function() {
   $ul.find('.hide').removeClass('hide');
});
ready
Show all elements
$clickme.click(function() {
    $ul.find('li').show();
});
ready
Show elements which are hidden
$clickme.click(function() {
    $ul.find('li').filter(':hidden').show();
});
ready
Show elements which have class 'hide'
$clickme.click(function() {
    $ul.find('.hide').show();
});
ready

Revisions

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