jquery $(this) vs $this vs chain

Benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="clicker">
  stuff
  <span>
    something
    <span>
      else
    </span>
  </span>
  <a href="http://www.google.com">link!</a>
  </div>

Test runner

Ready to run.

Testing in
TestOps/sec
recreating
$("#clicker").click(function() {
  $(this).css("color", "red");
  $(this).find("span").css("color", "blue");
  $(this).find("a").css("color", $(this).css("color"));
}).click();
ready
variable
$("#clicker").click(function() {
  var $this = $(this);
  $this.css("color", "red");
  $this.find("span").css("color", "blue");
  $this.find("a").css("color", $this.css("color"));
}).click();
ready
chaining
$("#clicker").click(function() {
  $(this).css("color", "red").find("span").css("color", "blue").end().find("a").css("color", $(this).css("color"));
}).click();
ready

Revisions

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