jQuery: Child selector vs .find() (v15)

Revision 15 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div class="replyForm">
<div class="container">
  <a href="#">Reply</a>
  <form class="whatever" action="" method="post">
    <input type="text" name="message" placeholder="" />
    <div class="formControls">
      <input type="submit" value="Send" name="sendButton" class="submit-widget button-field"
      />
    </div>
  </form>
  </div>
<div class="container">
  <a href="#">Reply</a>
  <form class="whatever" action="" method="post">
    <input type="text" name="message" placeholder="" />
    <div class="formControls">
      <input type="submit" value="Send" name="sendButton" class="submit-widget button-field"
      />
    </div>
  </form>
  </div>
<div class="container">
  <a href="#">Reply</a>
  <form class="whatever" action="" method="post">
    <input type="text" name="message" placeholder="" />
    <div class="formControls">
      <input type="submit" value="Send" name="sendButton" class="submit-widget button-field"
      />
    </div>
  </form>
  </div>
<div class="container">
  <a href="#">Reply</a>
  <form class="whatever" action="" method="post">
    <input type="text" name="message" placeholder="" />
    <div class="formControls">
      <input type="submit" value="Send" name="sendButton" class="submit-widget button-field"
      />
    </div>
  </form>
  </div>
<div class="container">
  <a href="#">Reply</a>
  <form class="whatever" action="" method="post">
    <input type="text" name="message" placeholder="" />
    <div class="formControls">
      <input type="submit" value="Send" name="sendButton" class="submit-widget button-field"
      />
    </div>
  </form>
  </div>
<div class="container">
  <a href="#">Reply</a>
  <form class="whatever" action="" method="post">
    <input type="text" name="message" placeholder="" />
    <div class="formControls">
      <input type="submit" value="Send" name="sendButton" class="submit-widget button-field"
      />
    </div>
  </form>
  </div>
<div class="container">
  <a href="#">Reply</a>
  <form class="whatever" action="" method="post">
    <input type="text" name="message" placeholder="" />
    <div class="formControls">
      <input type="submit" value="Send" name="sendButton" class="submit-widget button-field"
      />
    </div>
  </form>
  </div>
<div class="container">
  <a href="#">Reply</a>
  <form class="whatever" action="" method="post">
    <input type="text" name="message" placeholder="" />
    <div class="formControls">
      <input type="submit" value="Send" name="sendButton" class="submit-widget button-field"
      />
    </div>
  </form>
  </div>
</div>

Setup

var $replyForm = $('.replyForm');

Test runner

Ready to run.

Testing in
TestOps/sec
selector
$('.container a', $replyForm[0])
ready
Descendant selector
$('.container > a', $replyForm[0])
ready
Children method
$('.container', $replyForm[0]).children('a')
ready
find
$('.container', $replyForm[0]).find('a')
ready
Find w/o context
$($replyForm[0]).find('.container a')
ready
Selector jQuery context
$('.container a', $replyForm)
ready

Revisions

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