$() vs. find() vs. children()

Benchmark created by willh on

Preparation HTML

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

<div id="test_container">
<p class="ehh">yo</p>
<p class="meh">yo</p>
<p class="ehh">yo</p>
<p class="ehh">yo</p>
<p class="meh">yo</p>
<p class="meh">yo</p>
<p class="meh">yo</p>
<p class="ehh">yo</p>
<p class="ehh">yo</p>
<p class="meh">yo</p>
<p class="meh">yo</p>
<p class="meh">yo</p>
<p class="ehh">yo</p>
<p class="meh">yo</p>
<p class="ehh">yo</p>
<p class="ehh">yo</p>
<p class="meh">yo</p>
<p class="ehh">yo</p>
<p class="meh">yo</p>
<p class="ehh">yo</p>
<p class="ehh">yo</p>
<p class="meh">yo</p>
<p class="meh">yo</p>
<p class="meh">yo</p>
<p class="ehh">yo</p>
<p class="ehh">yo</p>
<p class="meh">yo</p>
<p class="meh">yo</p>
<p class="meh">yo</p>
<p class="ehh">yo</p>
<p class="meh">yo</p>
<p class="ehh">yo</p>
<p class="ehh">yo</p>
<p class="meh">yo</p>
<p class="ehh">yo</p>
<p class="meh">yo</p>
<p class="ehh">yo</p>
<p class="ehh">yo</p>
</div>
<script>
  var theContainer = $("#test_container");
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
$()
$("#test_container p.ehh").each(function() {
 $(this).css({
  "background-color": "blue"
 });
});
ready
find()
theContainer.find("p.ehh").each(function() {
 $(this).css({
  "background-color": "green"
 });
});
ready
children()
theContainer.children("p.ehh").each(function() {
 $(this).css({
  "background-color": "red"
 });
});
ready

Revisions

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