Caching jquery selectors (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="preview">
  <div>
    Some text
  </div>
  <div>
    Some more text
  </div>
  <a href="http://ineedtocacheselectors.com">Cache Me</a>
  <div>
    <h3 class="editable">
      Editable header
    </h3>
    <ul>
      <li class="editable">
        I'm editable
      </li>
      <li class="editable">
        Me too
      </li>
      <li class="editable">
        So am I
      </li>
    </ul>
  </div>
  <button type="button">
    Post Me
  </button>
</div>

Setup

var $preview = $('#preview');
    var makeEditableCached = function(selector, editableElement) {
        var form = jQuery('<form/>'),
            element = jQuery(editableElement),
            $selector = $preview.find(selector);
        form.bind('submit', function(event) {
          element.blur();
          event.preventDefault();
          return false;
        });
        element.height($selector.get(0).offsetHeight);
        $selector.bind('mouseover', function() {
          jQuery(this).toggleClass('yj-editableMouseOver');
        });
        $selector.bind('mouseout', function() {
          jQuery(this).toggleClass('yj-editableMouseOver');
        });
        var clickHandler = function() {
            $selector.unbind('click', clickHandler);
            element.bind('blur', function() {
              var text = element.val();
              form.remove();
              $selector.text(text);
              $selector.bind('click', clickHandler);
            });
            var text = $selector.text();
            form.append(element);
            element.val(text);
            element.css('width', $selector.innerWidth());
            $selector.text('');
            $selector.append(form);
            element.focus();
            };
        $selector.bind('click', clickHandler);
        };
    
    var makeEditableNotCached = function(selector, editableElement) {
        var form = jQuery('<form/>');
        var element = jQuery(editableElement);
        form.bind('submit', function(event) {
          element.blur();
          event.preventDefault();
          return false;
        });
        element.height($preview.find(selector).get(0).offsetHeight);
        $preview.find(selector).bind('mouseover', function() {
          jQuery(this).toggleClass('yj-editableMouseOver');
        });
        $preview.find(selector).bind('mouseout', function() {
          jQuery(this).toggleClass('yj-editableMouseOver');
        });
        var clickHandler = function() {
            $preview.find(selector).unbind('click', clickHandler);
            element.bind('blur', function() {
              var text = element.val();
              form.remove();
              $preview.find(selector).text(text);
              $preview.find(selector).bind('click', clickHandler);
            });
            var text = $preview.find(selector).text();
            form.append(element);
            element.val(text);
            element.css('width', $preview.find(selector).innerWidth());
            $preview.find(selector).text('');
            $preview.find(selector).append(form);
            element.focus();
            };
        $preview.find(selector).bind('click', clickHandler);
        };

Test runner

Ready to run.

Testing in
TestOps/sec
Caching Selector
makeEditableCached('.editable', '<input type="text" />');
ready
Not Caching Selector
makeEditableNotCached('.editable', '<input type="text" />');
ready

Revisions

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