Refer to immediate selector object with jQuery?
<p>I'm trying to learn some jQuery, and I setup a test page with the following code:</p>

<pre><code>&lt;a id='encode' href='javascript: void(0)'&gt;encode&lt;/a&gt; |  
&lt;a id='decode' href='javascript: void(0)'&gt;decode&lt;/a&gt; | 
&lt;br/&gt;
&lt;textarea id='randomString' cols='100' rows='5'&gt;&lt;/textarea&gt;

&lt;script type='text/javascript'&gt;
$(document.ready(function () {
  $('#encode').click(function() {
    $('#randomString').val(escape($('#randomString').val()));
  });
  $('#decode').click(function() {
    $('#randomString').val(unescape($('#randomString').val()));
  });     
});
&lt;/script&gt;
</code></pre>

<p>The idea is I can put something in the textarea and click either "encode" or "decode", and it will either escape or unescape what I put into the textarea.   </p>

<p>This code works just fine, but my question has to do with how I am changing the value of the textarea. In my code, I am selecting the textarea value twice: once to (un)escape it, and once again to change the value. IMO this seems clunky and maybe unnecessary. I thought maybe I could do something like this instead:</p>

<pre><code>$('#randomString').val(escape(this));
</code></pre>

<p>But <code>this</code> seems to refer to the object of the link I clicked, not the <code>#randomString</code> selector, so is there some other magic word I can use to reference that <code>$('#randomString')</code>?</p>
