Correct way of Caching and this when using jQuery
<p>When using jQuery, caching is very important, and it seems I have forgotten the related principals. When I cache something, how can I re-use it inside function <code>on()</code>?</p>

<p>Example:</p>

<pre><code>var paginationDemo = $("#pagination-demo");
paginationDemo.on('click', function() {
  var index = $('#pagination-demo').find('.active &gt; a')[0].innerHTML;
  ...
});
</code></pre>

<p>As you can see here, I am calling jQuery again to find the id, shame on me! Is there a way to do it with <code>this</code>? </p>

<pre><code>var index = this.find('.active &gt; a')[0].innerHTML;
</code></pre>

<p>or:</p>

<pre><code>var index = $(this).find('.active &gt; a')[0].innerHTML;
</code></pre>

<p>But I am not sure what will <code>this</code> hold inside the body of <code>on()</code>. What is the correct way to do this?</p>