jquery $(this) vs $this vs chain (v2)

Revision 2 of this benchmark created on June 15, 2011

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>
  
<script>
  var constants = {
  color: 'color',
  red: 'red',
  span: 'span',
  blue: 'blue',
  link: 'a',
  clicker: '#clicker'
  };
  var outerVar = null;
  var tests = {
   recreating: function() {
    $(this).css("color", "red");
    $(this).find("span").css("color", "blue");
    $(this).find("a").css("color", $(this).css("color"));
   },
   variable: function() {
    var $this = $(this);
    $this.css("color", "red");
    $this.find("span").css("color", "blue");
    $this.find("a").css("color", $this.css("color"));
   },
   chaining: function() {
    $(this).css("color", "red").find("span").css("color", "blue").end().find("a").css("color", $(this).css("color"));
   },
   lessChaining: function() {
    $(this).css("color", "red").find("span").css("color", "blue");
    $(this).find("a").css("color", $(this).css("color"));
   },
   outerVar: function() {
    outerVar = $(this);
    outerVar.css("color", "red");
    outerVar.find("span").css("color", "blue");
    outerVar.find("a").css("color", outerVar.css("color"));
    outerVar = null;
  },
   constantRecreate: function() {
    $(this).css(constants.color, constants.red);
    $(this).find(constants.span).css(constants.color, constants.blue);
    $(this).find(constants.link).css(constants.color, $(this).css(constants.color));
   },
   constantOuterVar: function() {
    outerVar = $(this);
    outerVar.css(constants.color, constants.red);
    outerVar.find(constants.span).css(constants.color, constants.blue);
    outerVar.find(constants.link).css(constants.color, outerVar.css(constants.color));
  },
  };
</script>

Test runner

$("#clicker").click(tests.recreating);
$('#clicker').click();
$("#clicker").unbind('click', tests.recreating);

$("#clicker").click(tests.variable);
$('#clicker').click();
$("#clicker").unbind('click', tests.variable);

$("#clicker").click(tests.chaining);
$('#clicker').click();
$("#clicker").unbind('click', tests.chaining);

$("#clicker").click(tests.outervar);
$('#clicker').click();
$("#clicker").unbind('click', tests.outervar);

$(constants.clicker).click(tests.constantRecreate);
$(constants.clicker).click();
$(constants.clicker).unbind('click', tests.constantRecreate);

$(constants.clicker).click(tests.constantOuterVar);
$(constants.clicker).click();
$(constants.clicker).unbind('click', tests.constantOuterVar);

$("#clicker").click(tests.lessChaining);
$('#clicker').click();
$("#clicker").unbind('click', tests.lessChaining);

Revisions

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

• Revision 1: published on June 11, 2011
• Revision 2: published on June 15, 2011