title: jQuery append element during $.each()
body: <p>I'm trying to repeatedly append an element defined outside the closure in a jQuery <code>$.each()</code> loop see - <a href="http://jsfiddle.net/benedict_w/8Pczs/" rel="nofollow">http://jsfiddle.net/benedict_w/8Pczs/</a></p>
  
  <p>Could someone please explain why the element is only appended in the last iteration of the loop?</p>
  
  <p>e.g.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;blah&lt;/li&gt;
      &lt;li&gt;blah&lt;/li&gt;
      &lt;li&gt;blah&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>using the following jquery:</p>
  
  <pre><code>var remove = $('&lt;a href="#"&gt;remove&lt;/a&gt;');
  $('li').each(function(){
      $(this).append(remove);       
  });​
  </code></pre>
  
  <p>producers:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;blah&lt;/li&gt;
      &lt;li&gt;blah&lt;/li&gt;
      &lt;li&gt;blah &lt;a href="#"&gt;remove&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>