How can I attach a method to a DOM element in jQuery?
<p>Option #1:</p>

<pre><code>// Store the element as an object:
var counterEl = $("#counter");

// Attach a method to the object:
counterEl.updateCount = function (value) {
  // If the new value is greater than the existing value, update and animate the counter.
}

counterEl.updateCount(123); // Works.

$("#counter").updateCount(123); // Obviously does not work.
</code></pre>

<p>Option #2:</p>

<pre><code>var counterEl = $("#counter");

// Store the function expression in .data():
counterEl.data('updateCount', function (value) {
  // Major downside: If I access `this` here, it's the DOM window and not #counter.
}

counterEl.data('updateCount')(123); // Works.

$("#counter").data('updateCount')(123); // Works.
</code></pre>

<p>I understand why advice generally leans toward attaching a method to <code>$.fn</code> so that it is reusable, but it isn't immediately obvious to me why attaching a unique method to an element is any worse than attaching a unique event handler (like <code>.click()</code>) to an element.</p>

<p>Is there a better way to attach a method to a DOM element in jQuery? The <code>.data()</code> approach would be great if I could access the element through <code>this</code>.</p>
