Confused about 'this' keyword in jQuery
<p>I'm trying to figure out why the below 3 ways of using  <code>this</code> keyword don't work</p>

<p>Here is the HTML:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a id="i1" href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="i2" href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="i3" href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And here is the jQuery:</p>

<pre><code>// Output a list of href ids and append them to the ul element
$('ul li a').each(function() {
    $('&lt;li&gt;' + this.id + '&lt;/li&gt;').appendTo('ul') // this works
    // $(this.id).appendTo('ul') // this doesn't work
    // (this.id).appendTo('ul') // this doesn't work
    // $(this).attr('id').appendTo('ul') // this doesn't work
});
</code></pre>

<p>Here is also <a href="http://jsfiddle.net/DZPnP/2/" rel="nofollow">jsFiddle</a></p>

<p>Could somebody explain why none of the 3 code snippets which are commented out work?</p>
